Reactjs 为什么我的React表单提交值未定义？

我正在尝试创建一个表单，并将其值存储在state中——到目前为止，它是合理的

我想我已经设置好了，但是当我返回state的内容时，每个字段都没有定义。我不怀疑我在设置它时忽略了一些简单的东西，但我一辈子都看不到它是什么

有人能帮我摆脱痛苦吗

handleAddProperty = (event) => {
  event.preventDefault();
  console.log(this.state.fields);
  console.log(this.state.fields.type);
};

handleFieldChange = (event) => {
    this.setState({
      fields: {
        title: event.target.value.title,
        type: event.target.value.type,
        bedrooms: event.target.value.bedrooms,
        bathrooms: event.target.value.bathrooms,
        price: event.target.value.price,
        city: event.target.value.city,
        email: event.target.value.email,
      },
    });
  };

 render() {
    return (
      <div className="addproperty">
        <form onSubmit={this.handleAddProperty}>
          <button type="submit">Add</button>
          <input name="title" value={this.state.fields.title} onChange={this.handleFieldChange} />
          <select name="type" value={this.state.fields.type} onChange={this.handleFieldChange}>
            <option value={this.state.fields.type}>Flat</option>
            <option value={this.state.fields.type}>Detached</option>
            <option value={this.state.fields.type}>Semi-Detached</option>
            <option value={this.state.fields.type}>Terraced</option>
            <option value={this.state.fields.type}>End of Terrace</option>
            <option value={this.state.fields.type}>Cottage</option>
            <option value={this.state.fields.type}>Bungalow</option>
          </select>
          <input name="bedrooms" value={this.state.fields.bedrooms} onChange={this.handleFieldChange} />
          <input name="bathrooms" value={this.state.fields.bathrooms} onChange={this.handleFieldChange} />
          <input name="price" value={this.state.fields.price} onChange={this.handleFieldChange} />
          <select name="city" value={this.state.fields.city} onChange={this.handleFieldChange}>
            <option value={this.state.fields.city}>Manchester</option>
            <option value={this.state.fields.city}>Leeds</option>
            <option value={this.state.fields.city}>Sheffield</option>
            <option value={this.state.fields.city}>Liverpool</option>
          </select>
          <input name="email" value={this.state.fields.email} onChange={this.handleFieldChange} />
        </form>
      </div>
    );
  }
}

HandLeadProperty=（事件）=>{
event.preventDefault（）；
console.log（this.state.fields）；
log（this.state.fields.type）；
};
handleFieldChange=（事件）=>{
这是我的国家({
字段：{
标题：event.target.value.title，
类型：event.target.value.type，
卧室：event.target.value.beddrooms，
浴室：event.target.value.bathrooms，
价格：event.target.value.price，
城市：event.target.value.city，
电子邮件：event.target.value.email，
},
});
};
render（）{
返回(
添加
平的
独立的
半独立
阶地的
露台尽头
小屋
平房
曼彻斯特
利兹
谢菲尔德
利物浦
);
}
}

您应该访问

event.target.value

而不是

event.target.value[key]

，因为

handleFieldChange

函数会触发每个输入字段（当它们改变状态时）以及每个触发器

event.target

所指的是不同的输入字段（基本上是已更改的输入）

要更新状态，可以使用

event.target.name

作为组件状态内表单对象成员的键。代码可能如下所示：

 constructor(props) {
   super(props);
   this.state = { form: { name: 'Jane' } };
 }

 handleFieldChange(event) {
    // This will update specific key in your form object inside the local state
    this.setState({
      form: Object.assign({}, this.state.form, {
      [event.target.name]: event.target.value,
    }),
   });
 }


 <input
    name="test"
    type="text"
    onChange={e => this.handleFieldChange(e)}
 />

构造函数（道具）{
超级（道具）；
this.state={form:{name:'Jane'}}；
}
handleFieldChange（事件）{
//这将更新本地状态内表单对象中的特定键
这是我的国家({
form:Object.assign（{}，this.state.form{
[event.target.name]：event.target.value，
}),
});
}
这个.handleFieldChange（e）}
/>

您正在使用

handleFieldChange

作为所有输入的事件处理程序，但这并不意味着所有输入都将同时运行。如果您例如在

标题

输入中写入内容，则只有该输入将触发事件，

事件.target.value

将是

标题

值。谢谢@Tholle–这是有道理的，但我需要改变什么来纠正它？