Question

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

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

UI组件的外观图： quick comments and text area

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 />。 valueArr的onClick更新状态。
还具有onChange和value属性，用于显示评论数据。
这是可行的解决方案。

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"/>

Answer 2

这应该使您走上正确的轨道



<script>

function addNewComment(e){
  var content = $('#comment').val();
  content = content + '. ' + $(e).val();

}


</script>

<div>
   <Button value="I'll call you later" onClick='addNewComment(this)'>Quick comments</Button>
   <Button value="I'm in a meeting" onClick='addNewComment(this)'>Quick comments</Button>
   <Button value="I need some water" onClick='addNewComment(this)'>Quick comments</Button>

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

Answer 3

这就是我的做法。

dataId: {}
dtype: "float32"
id: 20129
isDisposed: (...)
isDisposedInternal: false
rank: (...)
rankType: "2"
shape: (2) [1, 1]
size: 1
strides: [1]
__proto__: Object

希望它很有帮助^ _ ^

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

3 个答案: