如何从打字稿中的反应钩子组件发出偶数？

Question

我有一个类似的组件：

<div>
<button onClick={add_input_list()}>add</botton>
<ul>
<li>
<input type="text" value={value} onChange={somefunction}/>
</li>
<li>
<input type="text" value= {value} onChange={somefunction}/>
</li>
</ul>
</div>

我只想将此组件作为子组件，它可以将此输入 onChange 事件作为 onChange 事件发送到外部。

但是 or 组件没有 onChange 事件。如何添加它？ 我需要潜水组件有 onChange 事件 emmit。如果输入有 onChange 事件，div 会在外面发出 onChange 事件。

完整的代码类似于：

https://codesandbox.io/s/formik-codesandbox-template-forked-0hrdu?file=/index.js

Answer 1

由于您需要输入列表，因此这里是更新后的代码。 Stackblitz 示例也已更新：

import React, { Component } from "react";
import { render } from "react-dom";

const App = () => {
  const handleChange = inputListState => {
    console.log("Input list state = ", inputListState);
  };
  return <MyInputList onChange={handleChange} />;
};

const MyInputList = ({ onChange }) => {
  const [state, setState] = React.useState();
  
  // When state changes, emit the value to the parent
  React.useEffect(() => {
    onChange(state);
  }, [state]);
  
  const editState = e => {
    setState({ ...state, [e.target.name]: e.target.value });
  }
  return (
    <ul>
      <li>
        <input name="input1" type="text" onChange={editState} />
      </li>
      <li>
        <input name="input2" type="text" onChange={editState} />
      </li>
      <li>
        <input name="input3" type="text" onChange={editState} />
      </li>
    </ul>
  );
};

render(<App />, document.getElementById("root"));

这里是the repro on Stackblitz。

您只需将父组件的一个方法作为 prop 传递给子组件，然后在输入的 onChange 事件中使用它。

[编辑]：对于输入列表，它的工作原理相同，但您只需要构建一个包含不同输入状态的对象，然后才能发出您的值。