reactjs - React.js 在一个函数中对两个不同的输入进行双向绑定

Question

我可以在一个函数中为两个不同的输入进行双向绑定吗？

为了绑定：

 <Input  placeholder='title...' onChange={this.handelChangetitle.bind(this)} />
 <textarea className='textarea' onChange={this.handelChangecontent.bind(this)}>d</textarea>

至：<p>Blog title:{this.state.title}</p> <p>Blog content:{this.state.content}</p>

我需要两个非常相似的功能：

handelChangetitle(event){this.setState({title:event.target.value})}
handelChangecontent(event){this.setState({content:event.target.value})}

有什么办法可以保存一些代码，只使用一个功能但同时绑定“标题”和“内容”？

Answer 1

您可以像这样创建一个函数：

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

然后将 name 属性添加到您的 input 和 textArea 标签，如下所示：

<Input name='title' placeholder='title...' onChange={this.handleChange} />
<textarea name='content' className='textarea' onChange={this.handleChange}>d</textarea>

Answer 2

向输入添加名称道具

<input 
  name="title" 
  onChange={this.handleInputChange} 
  value={this.state.title}
/> 

<textarea
  name="content" 
  onChange={this.handleInputChange} 
  value={this.state.content} 
/>

然后您将能够在处理程序函数中检索它

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