javascript - children 在 react parent 中输入 Action

Question

我有表单组件，它应该获取输入、按钮等表单元素。我如何检测 onChange 或 onClick 事件或 value if他们像 child 一样过去了？例如，我更改了第二个输入，以及如何检测我更改了第二个输入而不是另一个输入

我需要检测表单组件中的所有操作

const Form = ({children, ...rest}) => {
  
  const onChangeHandler = () => {
      //detect change input
  }
  
  return (
    <div style={{display: 'flex', flexWrap: 'wrap'}}>
      {children}
    </div>
  )
}
const App = () => {
    return <Form>
       <input style={{width: '100%'}}/>
       <input style={{width: '100%'}}/>
       <input style={{width: '100%'}}/>
    </Form>
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

<div id="root"/>

Answer 1

使用 React.cloneElement 方法怎么样？

const Form = ({children, ...rest}) => {

  const onChangeHandler = (e) => {
    const value = e.target.value
    const id = e.target.id
    console.log(value, id)
  }

  return (
    <div style={{display: 'flex', flexWrap: 'wrap'}}>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onChange: onChangeHandler
        })
      })}
    </div>
  )
}
const App = () => {
    return <Form>
       <input id="input1" />
       <input id="input2" />
       <input id="input3" />
    </Form>
}

ReactDOM.render(<App/>, document.getElementById('root'))

更新:是的，抱歉，它未经测试，输入无法了解 Form onChangeHandler，因此您只需将其映射到 CloneElement 中的 onChange。

我已向每个输入添加了 id 属性，以便您可以在 onChangeHandler 中看到每个输入的值如何更改。如果你想保存状态值，你可以使用这个 id 作为 Redux 之类的键。