Question

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

出于完整性/清晰度的考虑，构造函数代码

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

下面提供了组件的render函数，该函数调用handleChange 和handleSubmit。

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

我缺少某些东西。我是新来的反应。请告知。

Answer 1

您需要setState的参数作为对象。

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

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

1 个答案: