如何重置React中的状态，使视图更新

Question

我正尝试重置状态更新上的输入字段。所以当我的状态通过函数更新时，我的视图也会改变。下面是我的代码：

constructor(props){ 
    super(props) 
    this.state = { song: '', 
        videos: '' } 
    this.handleSongInput = this.handleSongInput.bind(this) 
} 

在

我的渲​​染功能，我做这样的事情

render() { 
    return (
      <div> 
       <TextField 
        floatingLabelText="Search Songs" 
        value={this.state.value} 
        onChange={this.handleSongInput} 
       /> 
       <br /> 
       <RaisedButton label="Search" onClick={this.searchSong} /> 
      </div> 
    ) 
} 

输入字段手柄功能如下。这只是设置状态。

handleSongInput = (e) => { 
     this.setState({ song: e.target.value}) 
    } 

现在按钮点击我有以下功能，重置初始

searchSong =() => { 
     ... 
     this.setState({song:''}) 
    } 

现在，如果我做的console.log我可以看到，状态已经改变。但在我看来，我仍然可以看到文本字段中填充了以前的文本。

如何设置文本框的值与当前状态

Answer 1

我相信你有一个变量名的问题：

value={this.state.value}

应改为：

value={this.state.song}