如何在React中重置状态以便视图更新

Question

I am trying to reset a input field on state update. So when my state updates through a function my view would change as well. Below is my code:

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

in my render function I do something like this

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

The handle function for the Input field is below. It is simply setting the state.

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

Now on button click I have the following function which resets the initial

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

Now if I do a console.log I can see that the state has changed. But in my view I can still see that the text field is populated with previous text.

How can I set the value of textfield with current state

Answer 1

I believe you have a variable name issue:

value={this.state.value}

should read:

value={this.state.song}