Question

我尝试在编辑文本下面显示哪些用户输入，但是它不能将所有文本字段链接在一起

如何使其工作我需要在标签

下面显示用户输入的内容

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

  handleChange = event => {
    this.setState({ 
          name: event.target.value, 
          title: event.target.value,
          email: event.target.value,
          experience: event.target.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" 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" 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" 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" value={this.state.experience} onChange={this.handleChange}/>
          <p>{this.state.experience}</p>
        </FormControl>
      </div>
    );
  }
}

如何使这项工作请帮助我新手

Answer 1

将handleChange方法更改为此

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

用name属性装饰你的输入文本元素，即

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

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

同样，你可以为剩下的元素做到这一点。

现在当您在文本框中输入内容时，它将被设置为具有当前目标名称和值的状态

Answer 2

使用如下的句柄更改方法。这将解决你的问题

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

如何在React js中的标签下方显示EditText详细信息？

2 个答案: