Binding redux form input.value to a datetimepicker

Question

我有一个React Native/redux/redux表单设置(主要是(工作，因此所有内容都已连接并运行。

当我设置带有异步更新的表单时，我会得到一个日期字段，为此，我定义了一个自定义组件，将其用作redux-form中的 <Field>。

这是我的组件：

import React, { Component } from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import { Text, theme, Button, Block, Input } from "galio-framework";
import DateTimePicker from "react-native-modal-datetime-picker";
export class DateInputField extends Component {
  constructor(props) {
    super(props);
    this.state = { isDateTimePickerVisible: false };
    this.handleChange = this.handleChange.bind(this);
  }
  showDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: true });
  };
  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };
  handleChange = date => {
    console.log("date->" + date);
    this.setState({ isDateTimePickerVisible: false, date: date });
    this.props.input.onChange(date);
  };
  render() {
    const { input, meta, ...inputProps } = this.props;
    return (
      <Block style={styles.container}>
        <TouchableOpacity onPress={this.showDateTimePicker}>
          <DateTimePicker
            date={new Date(input.value)}
            cancelTextIOS="Annulla"
            confirmTextIOS="Conferma"
            isVisible={this.state.isDateTimePickerVisible}
            onConfirm={this.handleChange}
            onCancel={() => this.setState({ isDateTimePickerVisible: false })}
          />
          <Input
            color={"black"}
            editable={false}
            // onTouch={this.showDateTimePicker}
            // onFocus={this.showDateTimePicker}
            label={this.props.label}
            style={styles.input}
            placeholder={this.props.placeholder}
            value={
              this.state.date != undefined
                ? this.state.date.getDate() +
                  "/" +
                  (this.state.date.getMonth() + 1) +
                  "/" +
                  this.state.date.getFullYear()
                : "gg/mm/aaaa"
            }
          />
        </TouchableOpacity>
      </Block>
    );
  }
}
export const styles = StyleSheet.create({
  container: {},
  label: {},
  input: { flex: 1, color: "red", padding: 0, height: 50 }
});

和我的领域：

<Field name={"consignment_date"} label="Fine" component={DateInputField} />

此组件有效，当我按字段时，datepicker显示了与之连接的"模型"字段的正确日期。

现在，我的问题是，当没有人类" on Change"事件更新字段时，我无法找到一种优雅的方法来更新字段值，但是组件的状态已更新(随后呈现组件(。我尝试了许多设置状态date字段的组合，但是我总是以无限的循环结束，因为更新状态会导致渲染，依此类推。

我尝试了许多组件生命周期事件，以使我对input.value的阅读并将其设置在状态。DisplayDate属性，但我想我缺少一种非常明显的方法来执行此操作，因为我对React Dynamics的知识很少。p>任何帮助都非常感谢。

Answer 1

发布有效的解决方案：

import React, { Component } from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import { Text, theme, Button, Block, Input } from "galio-framework";
import DateTimePicker from "react-native-modal-datetime-picker";
export class DateInputField extends Component {
  constructor(props) {
    super(props);
    this.state = { isDateTimePickerVisible: false }; //no more date in state
    this.handleChange = this.handleChange.bind(this);
  }
  showDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: true });
  };
  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };
  handleChange = date => {
    this.setState({ isDateTimePickerVisible: false });
    this.props.input.onChange(date);
  };
  render() {
    const { input, meta, ...inputProps } = this.props;
    return (
      <Block style={styles.container}>
        <TouchableOpacity onPress={this.showDateTimePicker}>
<DateTimePicker
            style={styles.label}
            date={new Date(input.value)}//date is transformed from input
            onDateChange={this.handleChange}
            cancelTextIOS="Annulla"
            confirmTextIOS="Conferma"
            isVisible={this.state.isDateTimePickerVisible}
            onConfirm={this.handleChange}
            onCancel={() => this.setState({ isDateTimePickerVisible: false })}
          />
          <Input
            color={"gray"}
            editable={false}
            enabled={false}
            label={this.props.label}
            style={styles.input}
            placeholder={this.props.placeholder}
            value={ //value is transformed to a date, then to the local string representation
              input.value !== ""
                ? new Date(input.value).toLocaleDateString()
                : new Date().toLocaleDateString()
            }
          />
        </TouchableOpacity>
      </Block>
    );
  }
}
export const styles = StyleSheet.create({
  container: {},
  input: {
    flex: 1,
    color: "red",
    height: 50,
    borderWidth: 0,
    borderBottomWidth: 1
  }
});