javascript - 单击另一个元素后如何获取元素的值？

Question

在 React 中，如何通过单击/更改另一个元素来获取另一个元素的值？

<div>
    <input {get this value}/>
    <button onClick={()=> console.log(get value of above input field)}/>
</div>

标签： javascriptreactjs

Answer 1

您可以使用document.getElementById().value

export default function App() {
  function getText() {
    var myInputText = document.getElementById('myInput').value;
    console.log('Input text:', myInputText);
  }
  return (
    <div>
      <input id="myInput" />
      <button onClick={() => getText()}>Get Text</button>
    </div>
  );
}

或者 您可以使用Forms和useState Hook

export default function App() {
  const [name, setText] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log(`Input text: ${name}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setText(e.target.value)}
      />
      <input type="submit" value="Submit" />
    </form>
  );
}