ReactJS, setState выдают событие onChange - PullRequest
Новая
       12

ReactJS, setState выдают событие onChange

0 голосов
/ 25 сентября 2018

в моем дочернем компоненте я установил ввод с помощью onChange: 

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

, который затем устанавливает состояние того, что пользователь поместил во вход 

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

затем, когда нажимается кнопка, я передаю это значение методу, который использует реквизиты для вызова метода родительского класса, который принимает это состояние при нажатии кнопки 

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 для сброса в «новый список воспроизведения» после нажатия кнопки сохранения.

Ответы [ 2 ]

0 голосов
/ 19 августа 2019 
constructor(props) {
    super(props);

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

0 голосов
/ 25 сентября 2018

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});
}
...