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，我可以看到状态已经改变。但在我看来，我仍然可以看到文本字段填充了以前的文本。 HTTP Request Defaults

如何设置具有当前状态的文本字段的值

Answer 1

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

value={this.state.value}

应为：

value={this.state.song}

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

1 个答案: