我想取textarea的值并在submit (react)时显示该值

Question

我没有找到它。我想获得textarea的值，并在提交时在<AddNote />组件的段落中显示该值。

我的项目是创建一种记笔记的应用程序。您必须在一个字段中输入备注，然后通过验证表单，您的备注将添加到下面。

谢谢你，祝你有美好的一天

Intonote.js

import React from 'react';
import AddNote from './addnote';
class Note extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<>
<div className='title'>
<h1>Notes</h1>
<span className="LineTitle"></span>
</div>
<form id="form" onSubmit={this.handleSubmit}>
<textarea className="textNote" id="textZone" value={this.state.value} onChange={this.handleChange}></textarea>
<button type="submit" className="addBtn">Ajouter</button>
<button type="reset" className="deleteBtn">Supprimer</button>
</form>
<AddNote />

</>
)
}
}
export default Note;

Intoaddnote.js

import React from 'react';
import Note from './note';
class AddNote extends React.Component {
render() {
return (
<>
<h3 className="NoteDetails">date/heure/minutes</h3>
<span className="NoteLine"></span>
<div className="notes">
<p></p> // the value of textarea into
</div>
</>
)
}
}
export default AddNote;

Answer 1

AddNote组件中的文本根据其父组件(Note)的操作而更改。因此，你可以将istextdisplay添加到Note组件的状态

this.state = { value: '', isTextDisplayed: false };

然后在提交时像这样修改

handleSubmit(event) {
event.preventDefault();
this.setState({ isTextDisplayed: true });
}

传递给你的子组件

<AddNote text={ this.state.value } isTextDisplayed={ this.state.isTextDisplayed } />

在AddNote

中使用

<p>{ this.props.isTextDisplayed && this.props.text }</p>

就是这样!在将来，如果您想要显示多个注释，您将需要在状态中存储一个注释数组，并使用循环

呈现它们。

Answer 2

将state的值发送给子组件，并在那里作为props使用:

<AddNote note={this.state.value} />

并在AddNote组件中使用:

<p>{this.props.note}</p>