Как по нажатию кнопки разблокировать поле ввода?

Всем привет. Я новичок и хочу сделать активным поле ввода при нажатии на кнопку. Делаю все это я на react:

<div>
  <input type="text" name="dog" id="ch" readOnly />
</div>
<div>
  <input type="button" value="RENAME DOG" name="get dog" />
</div>

Как это сделать?


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

Автор решения: Eugene X

Вот рабочий пример основ React - https://codepen.io/latdev/pen/mdBbjxQ

const {useState} = React; // import {useState} from "react"

function App() {
  const [name, setName] = useState("Rex");
  const [disabled, setDisabled] = useState("disabled");
  return <div id="app">
    <div style={{marginTop: "20px"}}>
      <input type="text" value={name} name="dog" disabled={disabled} onChange={event => setName(event.target.value)} />
    </div>
    <div style={{marginTop: "10px"}}>
      <button onClick={_ => setDisabled(disabled !== null ? null : "disabled")}>{disabled !== null ? "RENAME DOG" : "Save Dog Name"}</button>
    </div>
  </div>
}

ReactDOM.render(<App />, document.getElementById('app'))
→ Ссылка