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事件中使用它即可。

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

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

1 个答案: