ReactJS：表单数据捕获：值设置不正确答案

【问题标题】：ReactJS : Form Data Capture : values not setting properlyReactJS：表单数据捕获：值设置不正确
【发布时间】：2019-02-26 20:21:54
【问题描述】：

我正在尝试使用基于表单的数据捕获的小型反应应用程序，在键入值后，当用户单击提交按钮时，需要在状态变量中捕获值。但是，状态变量在 handleSubmit 函数中包含空值。为了清楚起见，下面给出了代码sn-ps，

构造函数代码，为了完整/清晰，

constructor(props)
{
    super(props);
    this.state = { 
        username : '', 
    };
}

handleChange 函数是我设置状态变量的地方，

handleChange = (event) => {
    this.setState( [event.target.username]: event.target.value );
}

handleSubmit 函数在哪里，我打印状态变量，它包含空值，而不是用户输入的值。

handleSubmit = () => {
    console.log(this.state.username);
}

组件的渲染函数如下，调用handleChange 并处理提交。

render() {
return(
    <div>
    <form>
    <label>
        Title:
        <input 
            type = "text"
            name="username" 
            onChange={event => this.handleChange(event)}/>
    </label>
            <button 
            label="Submit" 
            onClick={this.handleSubmit}>
            Submit
    </button>
    </form>
        </div>
)};

我错过了一些东西。我是新来的反应。请多多指教。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你需要 setState 的参数是一个对象。

handleChange = (event) => {
    this.setState({ [event.target.username]: event.target.value });
}

【讨论】：