Блог

У меня есть текстовое поле в моей форме, в котором я хочу показать пустое поле текстового поля после отправки формы. В настоящее время он показывает введенный текст в текстовой области даже после отправки формы. Я действительно запутался, потому что форма работает в обоих компонентах (родительский-дочерний).

 # Parent component
const examples = (props) => {
const [ data, setData ] = useState({});

const onSubmitHandler = (e) => {
e.preventDefault();
const content = data.content;

axios.post(
 `....................`,
content,
config 
)
.then((res) => setOthers(res.data.others))

return(
 .....
 .....
 < Form onSubmit={onSubmitHandler} setData={setData}  />)
  

что касается дочернего компонента

 const Form = (props)  => {
const [formData, setFormData] = useState({
  content: '',
});
const { content } = formData;

const onChange = (e) =>{
  e.preventDefault();
  const name = e.target.name;
  const value = e.target.value;

setFormData({ ...formData, [name]: value });
props.setData(data => ({ ...data, [name]: value })); 
}

return (
<form onSubmit={props.onSubmit}>
    <div className="col-12">
        <textarea 
          className="form-control"
          name="content"
          value={content}
          onChange={(e) => onChange(e)}
          >
          
        </textarea>
    </div>
  

Я знаю, что мне нужно снова установить content: ‘ ‘ после отправки формы, но я не могу понять это.

 handleSubmit=()=>{
 content:''
props.onSubmit()
}

 return (
<form onSubmit={handleSubmit}>
<div className="col-12">
    <textarea 
      className="form-control"
      name="content"
      value={content}
      onChange={(e) => onChange(e)}
      >
    </textarea>
  </div>
  

просто установите для содержимого значение null с помощью функции и оттуда вызовите обработчик родительской функции.
Надеюсь, это решит