ReactJS , setState 发出 onChange 事件答案

【问题标题】：ReactJS , setState issue onChange eventReactJS , setState 发出 onChange 事件
【发布时间】：2019-02-28 21:39:18
【问题描述】：

在我的子组件中，我使用 onChange 设置输入：

<input onChange={this.handlePlaylistTermChange} defaultValue={'New Playlist'}/>

然后设置用户输入内容的状态

handlePlaylistTermChange(e){
    this.setState({playlistName: e.target.value });

然后，当单击按钮时，我将该值传递给一个方法，该方法使用 props 调用在单击按钮时处于该状态的父类方法

save() {
        if (this.state.playlistName === null || this.state.playlistName === "") {
            this.props.onSave('New Playlist') ;
        } else {
            this.props.onSave(this.state.playlistName);
        }
    }

在父类中调用：

savePlaylist(name) {
        let trackUrIs = [];

        console.log(name);
        let playlist =this.state.playlistTracks;

        playlist.forEach(track =>{
            trackUrIs.push(track.URI);

        });
        console.log( "passed in name"+ name);
        console.log(trackUrIs);

        Spotify.savePlaylist(trackUrIs,name);


        console.log('whats happening here?' + this.state.playlistName);
        this.setState({playlistTracks: []});
        this.setState({playlistName: ''});

这一切都很好，除了我需要将播放列表名称值更改回“新播放列表”，但无论我做什么，onChange 上发生的值仍然存在。我已尝试重置子项的状态并将其传递给父项，但无论如何我都无法在单击保存按钮后将 onchange 值重置为“新播放列表”。

【问题讨论】：

标签： javascript reactjs input state

【解决方案1】：

DefaultValue 仅在挂载时分配给输入，不能随更改更新，您应该使用 controlled input 并根据状态设置值并在为了定义一个defaultValue，在state中初始化它

state={
   playList: 'New Playlist'
}

<input onChange={this.handlePlaylistTermChange} value={this.state.playList}/>

现在onChange的输入字段，你可以更新playList状态以反映输入中更新的值

handlePlaylistTermChange =(e) => {
    this.setState({playList: e.target.value});
}

【讨论】：

【解决方案2】：

constructor(props) {
    super(props);

    this.state = { clickedItem: "show here..." };
    this.ItemClick = this.ItemClick .bind(this);        
}
ItemClick = (e) => {
    this.setState({ clickedItem: e.target.value});
}

【讨论】：