Question

在尝试将名称对象作为状态传递给另一个组件之前，我正在尝试更新状态中的名称对象。

// some code above

this.state = {
    // some other states
    playerName: {
        player1Name: 'Default Player 1 Name',
        player2Name: 'Default Player 2 Name',
        player3Name: 'Default Player 3 Name'
    }
};
this.nameChange = this.nameChange.bind(this);

nameChange(e){
    this.setState( prevState => ({
        playerName: {
            ...prevState.playerName,
            [e.target.id]: e.target.value
        }
    })
}

render(){
    return(
        <div>
            <input type='name' id='player1Name' onChange={this.nameChange}/>
            <input type='name' id='player2Name' onChange={this.nameChange}/>
            <input type='name' id='player3Name' onChange={this.nameChange}/>
        </div>
    )
}

但是，它返回无法读取null的“ id”和null的“ value”的错误

Answer 1

您需要在name中使用input，在e.target.name中使用handler。请检查以下示例：

import React from "react";

export default class PlayerName extends React.Component {
    state = {
        // some other states
        playerName: {
            player1Name: 'Default Player 1 Name',
            player2Name: 'Default Player 2 Name',
            player3Name: 'Default Player 3 Name'
        }
    };

    nameChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;

         this.setState(prevState => ({
            playerName: {
                ...prevState.playerName,
                [name]: value
            }
        }));
        console.log( this.state);
    };

    render() {
        return (
            <div>
                <input type='name' name='player1Name' onChange={this.nameChange}/>
                <input type='name' name='player2Name' onChange={this.nameChange}/>
                <input type='name' name='player3Name' onChange={this.nameChange}/>
            </div>
        )
    }
}

Answer 2

状态更新是异步的，react使用synthetic events，因此，在处理排队状态更新时，该事件已被无效并返回到池中。您可以在加入更新之前对id和value属性进行解构。

nameChange(e){
  const { id, value } = e.target;
  this.setState( prevState => ({
    playerName: { ...prevState.playerName, [id]: value }
  });
}

或者您可以将事件标记为持续（event pooling）

注意：

如果要以异步方式访问事件属性，则可以应该在事件上致电event.persist()，这将删除池中的合成事件，并允许对该事件的引用为由用户代码保留。

nameChange(e){
  e.persist();
  this.setState( prevState => ({
    playerName: { ...prevState.playerName, [e.target.id]: e.target.value }
  })
}

更新状态数组

2 个答案: