Question

我有一个Form组件，该组件应该获取输入，按钮等表单元素。如何检测onChange或onClick事件或value的事件，如果它们像children一样通过了？例如，我更改了第二个输入，以及如何检测到我准确地更改了第二个输入，而不更改另一个

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

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'))

更新：是的，很抱歉，它未经测试，输入无法得知表单onChangeHandler，因此您只需将其映射到cloneElement中的onChange。

我已经为每个输入添加了id属性，以便您可以看到onChangeHandler中每个输入的值是如何变化的。如果您想保存该值以声明状态，则可以将该ID用作Redux之类的键。

Answer 2

React.cloneElement是您需要的。

从docs，

使用element作为开始，克隆并返回一个新的React元素点。结果元素将具有原始元素的道具新的道具在浅层融合。新孩子将取代现有的孩子。原始元素的键和ref将是保存。

import React from 'react'
import ReactDOM from 'react-dom'

const Form = ({children, ...rest}) => {
  const onChangeHandler = e => {
    //detect change input
    const value = e.target.value
    const name = e.target.name
    console.log('You have changed ', name, ' with value ', value)
  }

  return (
    <div style={{display: 'flex', flexWrap: 'wrap'}}>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onChange: onChangeHandler,
          name: `input${index + 1}`,
        })
      })}
    </div>
  )
}
const App = () => {
  return (
    <Form>
      <input />
      <input />
      <input />
    </Form>
  )
}

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

Demo

孩子在家长反应中输入动作

2 个答案: