Question

按钮：

<button className="name" id="michael" value="Michael Smith" onClick="">Michael Smith <small className="small">Senior Loan Officer</small></button>

文本框：

<input type="text" className="textbox" value="" placeholder="Select who you would like to book with" />

想要使用react将按钮值发送到文本框。怎么办？

Answer 1

为此，您将它们绑定到相同的值，可能存储在呈现它们的组件的状态中：

<button className="name" id="michael" value={this.state.userName} onClick="">Michael Smith <small className="small">Senior Loan Officer</small></button>

<input type="text" className="textbox" value={this.state.userName} placeholder="Select who you would like to book with" />

在做出反应时，你应该避免在行动发生时将价值从一个组件发送到另一个组件。而是更新您的状态，并触发重新呈现组件。

Answer 2

您必须通过处理程序和对setState的调用来处理按钮元素中的按钮，并在输入链接中处理state属性的值。如果输入是可编辑的，则必须使用onChange回调来处理更改以更新状态。

这样的事情：

<button className="name" id="michael" value="Michael Smith" onClick={()=>this.setState({selectedValue:"Michael Smith"})>Michael Smith <small className="small">Senior Loan Officer</small></button>

<input type="text" className="textbox" value={this.state.selectedValue} onChange={(e)=>this.setState({selectedValue:e.target.value})} placeholder="Select who you would like to book with" />

React JS：如何将按钮的值发送到文本框？

2 个答案: