Как заставить React окончательно изменить значение поля 'Поле' при событии выбора даты?

Question

Я хочу создать поле диапазона дат, чтобы при щелчке по полю ввода я открывал компонент выбора даты и при выборе диапазона дат. Я хотел бы заполнить поле ввода с выбранным диапазоном.

Что я сделал до сих пор:

Я создал поле ввода, обернутое компонентом Field . Для значения ввода я установил его this.state.DateRange. Что я хотел бы изменить на основе диапазона дат, выбранного из компонента DatePicker.

   handleSelect({selection}){
    let startDate = format(selection.startDate, 'DD/M/YYYY');
    let endDate = format(selection.endDate, 'DD/M/YYYY');

    this.setState({
      selection,
      DateRange: `${startDate} - ${endDate}`
    })
    }

    //TextFieldInput is a styled component - styled.input

    render(){

      return (
      <div>
        <Field name='test'>

          {({ input, meta, ...rest }) => (
            <TextFieldInput
              {...input}
              {...meta}
              value={this.state.DateRange}
            />
          )}
        </Field>
            <DateRangePicker
                ranges={[this.state.selection]}
                onChange={this.handleSelect}
          months={2}
          minDate={new Date()}
          showMonthAndYearPickers={false}
          showDateDisplay={false}
          staticRanges={[]}
          inputRanges={[]}
          direction='horizontal'
            />
      </div>
        )
    }

Что бы я хотел сделать:

Я могу установить значение поля ввода с помощью этого метода, но я не могу получить это значение, когда я нажимаю "Отправить". Кажется, что несмотря на то, что значение установлено на вход, оно не передается в onSubmit (values)

Answer 1

Что я могу собрать, так это то, что вы хотите установить состояние вашего родительского компонента из дочернего компонента.Однако в пределах <TextFieldInput/> вы не указываете на состояние родительского компонента.

Редактировать: я понимаю, что я не предоставил полный ответ, позвольте мне изменить код:

class ParentComponent extends React.Component {
  constructor( props ) {
    super( props );
    this.handleSubmit = this.handleSubmit.bind( this );
    this.state = {
      // your state
    };
  }
...

handleSubmit = ( event ) => {
    event.preventDefault();

    this.setState({
      DateRange: event.target.name.value
    });

    event.target.reset(); // resets fields
  }
...

<TextFieldInput handleSubmit={ this.handleSubmit } ... />
...

Затем в дочернем компоненте:

...
<form onSubmit=( ( e ) => { props.handleSubmit( e ); } }>

  <input value={ props.value } name="DateRange" /> // the handleSubmit sees the value by the input name, allowing multiple inputs if necessary in the future
...