将 redux 表单 input.value 绑定到日期时间选择器

Question

我有一个反应 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 显示正确的日期，该日期来自与之相连的 "model" 字段。

现在我的问题是，当字段不是由人 "onChange" 事件更新但组件的状态已更新（随后组件是渲染）。我尝试了多种设置状态 date 字段的组合，但我总是以无限循环结束，因为更新状态会导致渲染，依此类推。

我尝试了很多组件生命周期事件来读取 input.value 并将其设置在 state.displayedDate 属性上，但我想我错过了一个非常明显的方法这是因为我对 React 的动态知之甚少。

非常感谢任何帮助。

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

将 redux 表单 input.value 绑定到日期时间选择器

Binding redux form input.value to a datetimepicker

react-native

react-redux

redux-form