Javascript HTML输入未在handleChange上更新

当我输入时，它们不会被我输入的文本更新。如果我在所有表单上使用“this.state.value”，那么它们将使用相同的文本同时更新所有表单

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

export default class ContactArea extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            tel: '',
            company: '',
            msg: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});

    }

    handleSubmit(event) {
        alert(this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div class="row">
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Nome:
                            <input class="form-control" type="text" value={this.state.name} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Email:
                            <input class="form-control" type="text" value={this.state.email} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Telefone:
                            <input class="form-control" type="text" value={this.state.tel} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Empresa:
                            <input class="form-control" type="text" value={this.state.company} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-12 form-group">
                        <label class="label-width">
                            Mensagem:
                            <textarea class="form-control" type="text" value={this.state.msg} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-12">
                        <input type="submit" value="submit" class="btn btn-primary button-width button-spacing" />
                    </div>
                </div>
            </form>
        );
    }

}

import React，{Component，PropTypes}来自'React'；
从“react dom”导入react dom；
导出默认类ContactArea扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
电话：''，
公司：''，
消息：“”
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
警报（this.state.value）；
event.preventDefault（）；
}
render（）{
返回(
诺姆：
电邮：
电话：
Empresa：
策略：
);
}
}

现在您正在清除原始状态，只需设置值。试试这个

handleChange(event, type) {
    const newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
}

并在JSX中为每个项目

<input class="form-control" type="text" value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />

---

现在您正在清除原始状态，只需设置值。试试这个

handleChange(event, type) {
    const newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
}

并在JSX中为每个项目

<input class="form-control" type="text" value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />

---

您遇到问题的原因是，您现在所做的是每次输入字符时，您都会在状态对象上创建一个新的

value

属性，这不是您想要做的，因为它最多只能包含一个字符，例如，您输入的最后一个字符，以及您的输入没有用这一个字符更新的原因，是因为您没有在任何输入中引用

this.state.value

，也不应该因为这是不正确的而引用

（作为注释设置，这样的状态不会影响其他状态属性。）

因此，我建议您解决此问题的方法如下：

handleChange(event) {
  this.setState({ [e.target.name]: e.target.value });
}

为每个输入添加

名称
属性

<input class="form-control" type="text" name="name" value={this.state.name} onChange={this.handleChange} />
<input class="form-control" type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input class="form-control" type="text" name="tel" value={this.state.tel} onChange={this.handleChange} />
<input class="form-control" type="text" name="company" value={this.state.company} onChange={this.handleChange} />
<textarea class="form-control" type="text" name="msg" value={this.state.msg} onChange={this.handleChange} />

方括号是ES6的一项功能，称为计算属性。您遇到问题的原因是，您现在所做的是每次输入字符时，您都会在状态对象上创建一个新的
值
属性，而这不是您想要做的，因为它最多只包含一个字符字符，即您输入的最后一个字符，并且您的输入没有使用此单个字符更新的原因是因为您没有在任何输入中引用
this.state.value
，也不应该因为这不正确而引用

（作为注释设置，这样的状态不会影响其他状态属性。）

因此，我建议您解决此问题的方法如下：

handleChange(event) {
  this.setState({ [e.target.name]: e.target.value });
}

为每个输入添加
名称
属性

<input class="form-control" type="text" name="name" value={this.state.name} onChange={this.handleChange} />
<input class="form-control" type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input class="form-control" type="text" name="tel" value={this.state.tel} onChange={this.handleChange} />
<input class="form-control" type="text" name="company" value={this.state.company} onChange={this.handleChange} />
<textarea class="form-control" type="text" name="msg" value={this.state.msg} onChange={this.handleChange} />

方括号是ES6的特征，称为计算属性