小编Han*_*man的帖子

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

我正在尝试学习如何实现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)} />
    }
}
Run Code Online (Sandbox Code Playgroud)

子组件

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>
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

21
推荐指数
1
解决办法
4万
查看次数

标签 统计

javascript ×1

reactjs ×1