javascript - 单击按钮时如何将按钮的值添加到文本区域？

Question

我有一个文本区域，用户可以在其中写评论。为了让他们的生活变得轻松，我还设置了一组基本上具有预定义值的按钮。这些是可以单击的快速评论按钮，它应该将按钮的值添加到文本区域。它几乎就像 StackOverflow 的标签搜索框，您可以在其中键入以添加标签，也可以按 SO 选择建议的标签，这些标签位于底部的搜索框之外。

如果我能够使用文本区域中的现有文本渲染/添加文本区域上的注释值，我认为这将解决我的问题。谢谢你

UI 组件的外观图片:

savePatientComment() 是我保存 textArea 值的方法。

savePatientComment( { 目标: { 名称, 值 } }, 数据, 索引 ){

    this.setState({

        patientInfo: this.state.patientInfo.map((patient, i) => {
            if (i === index) {
                return { ...patient, [name]: value };
            }
            return patient;
        }),
    });

}

患者行组件

  <div>
     <Button value="quick comments-1" onClick={//add the value to text area}>Quick comments</Button>
     <Button value="quick comments-2" onClick={//add the value to text area}>Quick comments</Button>
     <Button value="quick comments-3" onClick={//add the value to text area}>Quick comments</Button>

  </div>
  <textarea
           className="patient-comment-textarea"
           placeholder="type your comments here"
           name="comment"
           value={patient.comment}
           onChange={(e) => savePatientComment(e, patient, index)} >
  </textarea>

Answer 1

错误:使用注释数组并迭代显示 <button /> 。 onClick 更新 valueArr 的状态。
此外，onChange和value属性 on 用于显示评论数据。
这是有效的解决方案。

class App extends React.Component {
  state = {
    valueArr: []
  };
  changeHandler = event => {
    this.setState({ valueArr: [event.target.value] });
  };
  clickHandler = datum => {
    this.setState(prevState => ({ valueArr: [...prevState.valueArr, datum] }));
  };
  render() {
    const comments = ["working", "sleeping", "eating", "coding"];
    return (
      <div>
        {comments.map(datum => (
          <button
            className="comment-btn"
            onClick={() => this.clickHandler(datum)}
          >
            {datum}
          </button>
        ))}
        <br />
        <textarea
          rows="6"
          cols="30"
          value={this.state.valueArr}
          onChange={event => this.changeHandler(event)}
          placeholder="type your comment here"
        />
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

.comment-btn {
  background-color: #fff;
  border: solid 1px greenyellow;
  height: 50px;
  width: 100px;
  margin: 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>