How can I add the value of a button to a textarea when clicking the button?
Question
I have a textarea, in which user can write a comment. To make their life easy I also have set of buttons which basically have predefined value. These are quick comments button that can be clicked and it should add the value of button to the textarea. Its almost like StackOverflow's tags search box where you can type to add the tags or you can select the suggested tags by SO, that are outside the search box on the bottom.
If I am able to render/added the comments value on text area with the existing text in the text area that would solve my problem i think. thank you
Picture of what the UI component looks like :
The savePatientComment() is how I save the value of the textArea.
savePatientComment( { target: { name, value } }, data, index ){
this.setState({
patientInfo: this.state.patientInfo.map((patient, i) => {
if (i === index) {
return { ...patient, [name]: value };
}
return patient;
}),
});
}
Patient Row component
<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 answers
solution1
1 ACCPTED 2019-08-06 15:28:34
Errors: Use array of comments and iterate to display <button /> . onClick update state for valueArr.
Also, onChange and value property on for displaying comments data.
This is working solution.
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"/>
solution2
0 2019-08-06 14:47:48
This should get you on the right track
<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>
solution3
0 2019-08-06 15:08:55
This is my how I would do it.
<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>
Hope it was Helpful ^_^
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.