React子组件的onChange事件更新状态

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试学习如何实现React表单（ES6语法）并将每个字段的onChange事件传递到负责更新状态的控制器父组件。这对于标准html元素来说效果很好，但是我正在尝试对日期字段使用预先罐装的Datepicker（https://www.npmjs.com/package/react-

bootstrap-date-picker），并且无法随时通过事件以相同的方式备份到父级。有没有简单的方法可以解决这个问题？

   class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {job: ''} 
    }
    setJobState(event) {
        var field = event.target.name;
        var value = event.target.value;
        this.state.job[field] = value;
        this.setState({job: this.state.job});
    }
render () {
        return <Child onChange={this.setJobState.bind(this)} />
    }
}

class Child extends React.Component {
    constructor (props) {
        super(props);
    }
    render () {
        <form>
         <input type="text" name="jobNumber" onChange={this.props.onChange} /> 
         <DatePicker name="dateCmmenced" onChange={this.props.onChange}  />
        </form>
    }
}

回答：

不是使用标准的浏览器事件来调用的onChange处理程序，而是使用和作为参数。我建议在您的组件中注册用于转换相应输入字段事件的不同处理程序：DatePicker``change``value``formattedValue``onChange``Child

class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {} 
    }
    onChange(field, value) {
        // parent class change handler is always called with field name and value
        this.setState({[field]: value});
    }
    render () {
        return <Child onChange={this.onChange.bind(this)} />
    }
}

class Child extends React.Component {
    constructor (props) {
        super(props);
    }
    onFieldChange(event) {
        // for a regular input field, read field name and value from the event
        const fieldName = event.target.name;
        const fieldValue = event.target.value;
        this.props.onChange(fieldName, fieldValue);
    }
    onDateChange(dateValue) {
        // for a date field, the value is passed into the change handler
        this.props.onChange('dateCommenced', dateValue);
    }
    render () {
        return <form>
          <input type="text" name="jobNumber" onChange={this.onFieldChange.bind(this)} /> 
          <DatePicker onChange={this.onDateChange.bind(this)}  />
        </form>
    }
}

以上是 React子组件的onChange事件更新状态 的全部内容， 来源链接： utcz.com/qa/430461.html

回到顶部