React-очистка значения input после отправки формы

Question

Здраствуйте, мне нужно очистить <input ref={commentInput} className='form-control' type="text"/> после нажатия на <button onClick={addComment} className='add-btn'>+</button>

const ContentInfo = () => {
const { selectedPatient, comments, setComments } = useContext(PatientContext);

const commentInput = React.createRef();

const addComment = () => {
    const date = moment();
    setComments([...comments, { comment: commentInput.current.value, date: date }]);     
};

return (
    <div className='content'>

        <ContentHeader />

        <div className='info'>
            <div className='short-info'>
                <table>
                    <tbody>
                        <tr>
                            <td>Date of Birth:</td>
                            <td>{selectedPatient.birth}</td>
                        </tr>
                        <tr>
                            <td>Gender:</td>
                            <td>{selectedPatient.gender}</td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td>{selectedPatient.country}</td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td>{selectedPatient.state}</td>
                        </tr>
                        <tr>
                            <td>Address:</td>
                            <td>{selectedPatient.city}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div className='comments'>
                <div>
                    <p>
                        <h3 className='comments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {comments.map((c) =>                               
                            <li>
                                <div className='new-comment'>
                                    <div>
                                        <strong>{moment(c.date).format('ll')}</strong>
                                    </div>
                                    <div>
                                        {c.comment}
                                    </div>
                                </div>
                            </li>     
                        )}
                    </ul>
                </div>

                <div className='create-commentInput'>
                    <input ref={commentInput} className='form-control' type="text"/>
                    <button onClick={addComment} className='add-btn'>+</button>
                </div>

            </div>  
                         
        </div>
    </div>
);

}

Answer 1

//кантролируемый компонент
const App2 = () => {
  const [value, setValue] = useState('')  

  const handleClear = (e: any) =>  {
    e.preventDefault()
    setValue('')
  }
  const handleChange = (e: any) => setValue(e.target.value)

  return <form>
    <input value={value} onChange={handleChange}/>
    <button onClick={handleClear}>send</button>
  </form>
}

//не кантролируемый компонент
export const App = () => {
  const ref = useRef<any>()

  const handleClear = (e: any) => {
    e.preventDefault()
    ref.current.value = ''
  }

  return <>
  <form>
    <input ref={ref} />
    <button onClick={handleClear}>send</button>
  </form>
  <App2/>
  </>
}

БЛОГ НА HUSL

React-очистка значения input после отправки формы

Ответы (1 шт):