Javascript ReactJS,设置状态问题更改事件
在我的子组件中,我使用onChange设置输入:Javascript ReactJS,设置状态问题更改事件,javascript,reactjs,input,state,Javascript,Reactjs,Input,State,在我的子组件中,我使用onChange设置输入: <input onChange={this.handlePlaylistTermChange} defaultValue={'New Playlist'}/> 然后单击按钮时,我将该值传递给一个方法,该方法使用props调用在单击按钮时处于该状态的父类方法 save() { if (this.state.playlistName === null || this.state.playlistName === "")
<input onChange={this.handlePlaylistTermChange} defaultValue={'New Playlist'}/>
然后单击按钮时,我将该值传递给一个方法,该方法使用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: ''});
这一切都很好,除了我需要Playlist name值改回“newplaylist”,但无论我做什么,onChange上发生的值都会保留。我已尝试重置子级中的状态,并将其传递给父级,无论发生什么,我都无法在单击“保存”按钮后将onchange值重置为“新建播放列表”。
DefaultValue
仅在装载时分配给输入,不能随更改而更新,您应该使用受控输入
并根据状态设置值,为了定义默认值
,请在状态下对其进行初始化
state={
playList: 'New Playlist'
}
<input onChange={this.handlePlaylistTermChange} value={this.state.playList}/>
state={
playList: 'New Playlist'
}
<input onChange={this.handlePlaylistTermChange} value={this.state.playList}/>
handlePlaylistTermChange =(e) => {
this.setState({playList: e.target.value});
}
constructor(props) {
super(props);
this.state = { clickedItem: "show here..." };
this.ItemClick = this.ItemClick .bind(this);
}
ItemClick = (e) => {
this.setState({ clickedItem: e.target.value});
}