单击按钮时，如何将按钮的值添加到文本区域？
单击按钮时，如何将按钮的值添加到文本区域？
提问于 2019-08-06 14:26:52
我有一个文本区域，用户可以在其中写一个注释。为了让他们的生活更轻松，我还设置了一组按钮，基本上都有预定义的值。这些是可以单击的快速注释按钮，它应该将按钮的值添加到textarea中。就像StackOverflow的tags框一样，您可以键入以添加标记，也可以选择底部搜索框之外的建议标记。
如果我能够用文本区域中的现有文本呈现/添加文本区域上的注释值，我认为这将解决我的问题。谢谢
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>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-06 15:28:34
错误:使用注释数组并迭代显示<button />。onClick valueArr的更新状态。
另外，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"/>
Stack Overflow用户
发布于 2019-08-06 14:47:48
这会让你走上正确的轨道
<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>Stack Overflow用户
发布于 2019-08-06 15:08:55
我就是这样做的。
<body>
<div>
<input type="button" name="" value="Hello"></input>
<input type="button" name="" value="Good Job"></input>
<input type="button" name="" value="Have a nice day"></input>
</div>
<!-- A form for sending/ saving data -->
<form class="" method="post">
<textarea rows="4" cols="50">this is you current text</textarea>
<input type="submit" name="" value="submit">
</form>
<script type="text/javascript">
const buttons = document.querySelector('div') // Selecting all the buttons
const form = document.querySelector('form textarea') // Selecting my textarea
buttons.addEventListener('click', e => {
// when a button is clicked add the value to the textarea
form.value += ' ' + e.target.value
console.log(form.value, e.target.value);
})
</script>
</body>希望这对^_^有帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57378310
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号