1

Здраствуйте, мне нужно очистить <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>
);

}

1 ответ 1

0
//кантролируемый компонент
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/>
  </>
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.