datetime-local в реагирующем компоненте - PullRequest
Новая
       6

datetime-local в реагирующем компоненте

0 голосов
/ 11 декабря 2018

Существует компонент:

класс 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, но он инициализируется только один раз.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Реализуйте функцию 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;
0 голосов
/ 11 декабря 2018

, если вы считаете, что должны иметь значение, установите его как 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}/>
...