Question

在我的情况下，我使用Redux并希望创建一个可重用的组件，该组件在调用onChange函数时可以从父组件传递到子组件。但是不确定如何在哑组件中执行此操作，因此我希望有一个输入字段，当用户在该字段中键入一些字母/数字时。它应该调用父 onChange 函数，并在此基础上找到正确的组件并将该值传递给该组件。除了CheckBox之外，几乎所有组件都具有onChange函数。有没有一种可以重复使用的方式来编写DRY。下面的代码段中有更多代码，请向下滚动更多。

const Parent = () => {
  const checkForm = () => {
    console.log('checkForm');
  }

  const onChange = (e) => {
    getValue(e.target.value, e.target.name);

  }

  return (
    <div className="App">
      <form onSubmit={checkForm}>
        <Name onChange={onChange}/>
        <Surname onChange={onChange}/>
        <Email onChange={onChange}/>
        <PromoCode onChange={onChange}/>
        <CheckBox/> 
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

const mapDispatchToProps = dispatch => ({
  getValue: (inputValue, componentName) => dispatch(getValue(inputValue, componentName))
});


const Name = () => {
  return (
    <div>
        Name
      <input 
        name='name'
        type="text" 
        // value={this.state.name} 
        // onBlur={nameOnBlur} 
        onChange={onChange} 
        placeholder="Enter first name" 
      />
    </div>
  )
}

const mapDispatchToProps = dispatch => ({
    getValue: (inputValue, componentName) => dispatch(getValue(inputValue, componentName))
});

const mapStateToProps = (state) => {
    return {
        curInputValue: state.form.name || []
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Name);

export const form = (state = initialState, action) => {
    switch(action.type) {
        case types.GET_VALUE: {
            return {
                ...state,
                [action.componentName]: action.value
            }
        }
        default: 
        return state;
    }
}

Answer 1

总结一下我相信您在问的问题：

我如何编写一个onChange处理程序，该处理程序可以处理各种文本字段输入的更新。

这可能类似于：

const [formData, setFormData] = useState({name: '', surname: '', etc.})

const handleChange = (name) => event => {
 setFormData({...state, [name]: event.target.value })
} 

return (
  <div>
    <Name value={name} onChange={handleChange('name')} />
    <Surname value={surname} onChange={handleChange('surname')} />
    {...content}
  </div> )

要注意的关键是我们将状态存储在一个对象中，每次都调用一个事件处理程序，并且该事件处理程序根据使用的参数而变化。

如果您对此有兴趣使用redux（除非您绝对必须给出它所带来的复杂性，否则我建议您这样做），代码看起来类似，但是您将不得不为每个触发的onChange和值调度则类似于value={props.form.name}

尝试在哑组件可重用组件Redux中将父代传递给子代

1 个答案: