react-hooks - 如何使用钩子传递文本框目标值 onchange 事件并更改对象属性

Question

使用 useState 更新完整的对象属性

使用钩子传递文本框目标值 onchange 事件并更改对象属性

function ExampleObjectHooks() {

    const [name, setname] = useState({ first: '', last: '' });

    const onInputNameChange = (e) => {
        setname({ first: e.target.value, last: e.target.value });
        console.log(name);
    }


    return (
        <div>
            <form>
                <input type="text" onChange={(e) => onInputNameChange(e)} ></input>
                <input type="text" onChange={e => onInputNameChange(e)} ></input>
            </form>
            {name.first}{name.last}
        </div>
    );
}

标签： react-hooksonchange

Answer 1

为每个字段添加一个name属性input，并使用名称（key在代码中）更新状态。需要自己合并各个字段状态的节点。如此传播先前的状态，并覆盖您刚刚更新的字段。

const { useState } = React;

function ExampleObjectHooks() {

  const [name, setname] = useState({ first: '', last: '' });

  const onInputNameChange = ({ target }) => {
    const { name: key, value } = target;
    
    setname(state => ({
      ...state,
      [key]: value
    }));
  };

  return (
    <div>
      <form>
        <input name="first" type="text" onChange={onInputNameChange} ></input>
        <input name="last" type="text" onChange={onInputNameChange} ></input>
      </form>
      {name.first} {name.last}
    </div>
  );
}

ReactDOM.render(
  <ExampleObjectHooks />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>