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>
        )
    }

我想做什么：

我可以通过这种方法设置输入字段的值，但是当我按下Submit时，我无法获得该值。似乎尽管已将值设置为输入，但它并未传递给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
...

如何在日期选择器事件中使React最终形式的``字段''值发生变化？

1 个答案: