Реагировать - сбросить ввод компонента

Question

Мне тяжело с компонентом, и я надеюсь, что вы, ребята, поможете мне. Поэтому я создал пользовательский компонент, который возвращает отформатированное значение того, что пользователь ввел во ввод (если пользователь ввел '1999-9-9', он возвращает '1999-09-09 00:00'), и значение равно присваивается состоянию родителя (handleCustomInputValueChange). Теперь... проблема в том, что, если я нажимаю на "числовой" тип и заполняю ввод случайными символами, сохраняю его и перехожу на "datetime", ввод остается неизменным, не сбрасывается или не получить данные из реквизита. Он имеет старое значение из числа. Использование метода componentWillReceiveProps() во многих случаях будет решением этой проблемы, но не здесь, потому что все, что я хочу, - это отправить данные родителю. Мне не нужно, чтобы эти данные отправлялись обратно на мой "CustomInput".

Родительский компонент:

    handleCustomInputValueChange(changeEvent) {
        this.setState({value: changeEvent});
    }
    ...
    switch(type) {
        case 'NUMERIC':
            return <CustomInput data={value} type="numeric" callbackParent={handleCustomInputValueChange} />
            break;
        case 'DATETIME':
            return <CustomInput data={value} type="datetime" callbackParent={handleCustomInputValueChange} />
            break;
    }

Дочерний компонент

export default class CustomInput extends Component {
    constructor(props) {
        super();

        this.state = {
            value: props.data || ''
        }
    }

    handleChange(event) {
        /* formatting data */
        callbackParent(formattedData);
    }

    render() {
        return <input type="text" onChange={this.handleChange} value={this.state.value} />;
    }
}

Итак... есть ли способ сбросить вход после переключения на другой тип?

Спасибо!

Answer 1

Вы не передаете данные о состоянии ребенку должным образом, при передаче data ребенку, вы должны сделать,

<CustomInput data={this.state.value} type="numeric" callbackParent={handleCustomInputValueChange} />

Редактировать: Заставьте вашего ребенка слушать изменения в реквизите, основываясь на этом значении состояния.

Или вы можете изменить визуализацию вашего ребенка на это:

 render() {
  const {data}   = this.props
        return <input type="text" onChange={this.handleChange} value={data?data:''} />;
    }