javascript - 更新状态数组

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' 的错误

标签： javascriptreactjs

Answer 1

你需要使用nameininput和e.target.namein 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>
        )
    }
}