react-native - 将 redux 表单 input.value 绑定到 datetimepicker

Question

我有一个 react native/redux/redux 表单设置，它（大部分）工作，所以一切都连接起来并运行。

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

这是我的组件：

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显示来自与其连接的“模型”字段的正确日期。

现在我的问题是，当人工“onChange”事件未更新字段但更新了组件的状态（随后呈现了组件）时，我无法找到一种优雅的方式来更新字段值。我尝试了许多设置状态date字段的组合，但我总是以无限循环结束，因为更新状态会导致渲染等等。

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

非常感谢任何帮助。

标签： react-nativereact-reduxredux-form

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