1

我想创建一个日期范围字段，以便在单击输入字段时打开一个日期选择器组件并选择一个日期范围。我想用选定的范围填充输入字段。

到目前为止我做了什么：

我创建了一个由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)

4

1 回答 1

0

我可以收集到的是，您想从子组件设置父组件的状态。但是，在 内<TextFieldInput/>，您并没有指向您的 Parent 组件状态。

编辑：我意识到我没有提供完整的答案，让我重构代码：

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
...
于 2019-04-28T11:50:02.780 回答