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})}

有什么方法可以节省一些代码，只使用一个函数但同时绑定 'title' 和 'content'？

Answer 1

向输入添加名称属性

<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 })
}

Answer 2

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

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

然后为您的 input 和 textArea 标签添加一个名称属性，如下所示：

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

React.js 一个函数中两个不同输入的双向绑定

React.js two-way binding for two different inputs in one function

reactjs

two-way-binding