React.js中如何让EditText输入内容独立显示在Label下方？

嘿，我一眼就发现问题所在啦！你当前的handleChange函数不管哪个输入框触发输入事件，都会把所有状态（name、title、email、experience）都设置成同一个输入值，这就是为什么所有输入框内容会互相联动的原因。

要实现每个输入框内容独立显示在对应Label下方，只需要做两个小改动：

1. 给每个Input组件添加name属性 #

让每个输入框的name属性和你state里的字段名一一对应，这样我们就能精准识别是哪个输入框触发了变化：

<Input id="name-simple" name="name" value={this.state.name} onChange={this.handleChange}/>
<Input id="title-simple" name="title" value={this.state.title} onChange={this.handleChange}/>
<Input id="email-simple" name="email" value={this.state.email} onChange={this.handleChange}/>
<Input id="experience-simple" name="experience" value={this.state.experience} onChange={this.handleChange}/>

2. 修改handleChange函数的逻辑 #

利用输入框的name属性，只更新对应字段的状态，而不是一次性覆盖所有字段：

handleChange = event => {
  const { name, value } = event.target;
  this.setState({
    [name]: value // 使用计算属性名动态更新对应的状态字段
  });
};

修改后的完整代码 #

class ComposedTextField extends React.Component {
  state = { name: '', title: '', email: '', experience: '' };

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

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <Typography variant="headline">Header Info</Typography>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="name-simple">Name</InputLabel>
          <Input 
            id="name-simple" 
            name="name" 
            value={this.state.name} 
            onChange={this.handleChange}
          />
          <p>{this.state.name}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="title-simple">Title</InputLabel>
          <Input 
            id="title-simple" 
            name="title" 
            value={this.state.title} 
            onChange={this.handleChange}
          />
          <p>{this.state.title}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="email-simple">Email</InputLabel>
          <Input 
            id="email-simple" 
            name="email" 
            value={this.state.email} 
            onChange={this.handleChange}
          />
          <p>{this.state.email}</p>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="experience-simple">Experience</InputLabel>
          <Input 
            id="experience-simple" 
            name="experience" 
            value={this.state.experience} 
            onChange={this.handleChange}
          />
          <p>{this.state.experience}</p>
        </FormControl>
      </div>
    );
  }
}

这样修改后，每个输入框的内容就会独立更新并显示在对应的Label下方啦！核心原理是通过name属性给每个输入框做唯一标识，然后在handleChange里动态匹配并更新对应的状态字段，彻底避免了所有状态被统一赋值的问题。

内容的提问来源于stack exchange，提问作者HemalHerath