将 React Hook 传递给功能组件

Question

我正在寻找一个功能组件，它接收一个钩子及其 Set function 作为参数，并使用这些字段（以及其他一些字段）构造一个关联的输入。 遇到传递传播运算符的问题（如“Learning React, 2nd edition”中所述）。 以下相关片段，感谢帮助！

1. 通用 function 接受一个初始值并返回一个新的钩子及其 setValue function：

    export const useInput = (initialValue) => {
      const [value, setValue] = useState(initialValue);
      return [
        { value, onChange: (e) => setValue(e.target.value) },
        () => setValue(initialValue),
      ];
    };

2. 要使用的钩子：

    const [firstName, setFirstName] = useInput("");

3. 功能组件（经过一些清理）

      const MyInputComp = (props) => {
        return (
          <div>
            <input
              className="blah-blah-blah"
              {props.obj}   // *ERROR*
              type="text"
              placeholder={props.placeholder}
              required={props.required}
            />
          </div>
        );
      };

4. 下面是组件的调用方式：

    <MyInputComp
        text="First Name"
        obj={...firstName}  // *ERROR*
        placeholder="Jon"
        required={true}
    />

Answer 1

问题

您没有正确使用输入值和更新程序。

返回为{ value, onChange: (e) => setValue(e.target.value) }

但你作为obj单独通过

obj={...firstName}

和

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {props.obj}   // *ERROR*
        type="text"
        placeholder={props.placeholder}
        required={props.required}
      />
    </div>
  );
};

解决方案

将value和onChange传播到底层input中

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {...props.obj} // <-- spreads value & onChange props
        type="text"
        placeholder={props.placeholder}
        required={props.required}
      />
    </div>
  );
};

由于MyInputComp似乎只是代理了一些道具，因此您可以将它们全部传播，然后解构您需要的内容。

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {...props} // <-- spread all passed props
        type="text"
      />
    </div>
  );
};

利用

const [firstName, setFirstName] = useInput("");

<MyInputComp
    text="First Name"
    {...firstName} // <-- spread to input
    placeholder="Jon" // <-- spread to input
    required={true} // <-- spread to input
/>

Answer 2

您将需要进行一些更改。 首先传播props.obj object 以便引擎盖下的输入元素可以value和onChange道具。 如

 const MyInputComp = (props) => { return ( <div> <input className="blah-blah-blah" {...props.obj} type="text" placeholder={props.placeholder} required={props.required} /> </div> ); };

然后像这样渲染MyInputComp

 <MyInputComp
      text="First Name"
      obj={firstName}
      placeholder="Jon"
      required={true}
      onChange={handleNameChange}
/>

同样在自定义useInput挂钩中，更改 function 应该像

(value) => setValue(value)

而不是() => setValue(initialValue)