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

你可以创建一个这样的函数：

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

然后在input和textArea标记中添加name属性，如下所示：

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

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

2 个答案: