react组件中的datetime-local

Question

有一个组件：

类DatetimeFilter扩展了组件{

constructor(props) {
    super(props);    
    this.changeFromTimeTaskEducation = this.props.changeFromTimeTaskEducation;
    this.changeToTimeTaskEducation = this.props.changeToTimeTaskEducation;
}

changeFromTimeTaskEducation = (event) => {
    // change value in parent
};

changeToTimeTaskEducation = (event) => {
    // change value in parent
};

render() {
    return (
                    <input onChange={this.changeFromTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" value={this.props.fromTimeTaskEducation}/>
                    <input onChange={this.changeToTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" value={this.props.toTimeTaskEducation}/>
    );
}

}

导出默认DatetimeFilter；

当我尝试更改输入中的值时，出现异常：

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

如何解决这个问题呢？

我尝试设置defaultValue，但它只初始化一次。

Answer 1

如果您认为必须有一个值，请将其设置为defaultValue和onChange维护状态

​

<input onChange={this.changeFromTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" defaultValue={this.props.fromTimeTaskEducation}/>
                    <input onChange={this.changeToTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" defaultValue={this.props.toTimeTaskEducation}/>

​

Answer 2

实现一个调用父(prop)函数的OnChange函数。您正在用本地函数定义覆盖来自父函数的函数。

这里有一个正确的方法来做你想做的事情：

class DatetimeFilter extends Component {

    localFromTimeTaskEducation = (event) => {
      this.props.changeFromTimeTaskEducation(event.target.value); //Or whatever value you are trying to pass
    }

    localToTimeTaskEducation = (event) => {
      this.props.changeToTimeTaskEducation(event.target.value);
    }

    render() {
        return (
          <input 
            onChange={this.localFromTimeTaskEducation} 
            className="filter_datetime_second_value"
            type="datetime-local" 
            value={this.props.fromTimeTaskEducation}
          />

          <input 
            onChange={this.localFromTimeTaskEducation} 
            className="filter_datetime_second_value"
            type="datetime-local"
            value={this.props.toTimeTaskEducation}
          />
        );
    }
}
export default DatetimeFilter;