ReactJS , setState 发出 onChange 事件

Posted 2023-02-22

【中文标题】ReactJS , setState 发出 onChange 事件

【英文标题】：ReactJS , setState issue onChange event

【发布时间】：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 值重置为“新播放列表”。

【参考方案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);