Привязка избыточной формы input.value к датчику времени

Question

У меня есть собственная форма реагирования / избыточного / избыточного числа, которая (в основном) работает, поэтому все подключено и работает.

Когда я настраиваю форму с асинхронным обновлением, я получаю поле даты, для которого я определил пользовательский компонент, который будет использоваться как <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 с правильной датой, полученной из подключенного поля «модель», подключенного к нему.

Теперь моя проблема в том, что я не могу придумать элегантный способ обновить значение поля, когда поле не обновляется человеческим событием "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
  }
});