Question

我在滚动视图中有一个表单。表单中的问题很少，例如starrating或datepicker。见代码：

＆＃13;

<DatePicker
            date={this.state.currentDate}
            mode="date"
            placeholder="select date"
            format="DD-MM-YYYY"
            minDate="01-01-2015"
            maxDate="01-01-2050"
            confirmBtnText={I18n.t("confirm_button")}
            cancelBtnText={I18n.t("login_page_scan_cancel")}
            onDateChange={(date) => {this.setState({currentDate: date})}}
          />

＆＃13;

正如您在上面的代码中看到的，当您更改值时，它会更新this.state.currentDate，并且还会将this.state.currentDate显示为当前所选日期。它正在工作，但问题是当向下滚动以填充表单时，当您更改值时，正在调用setState，并且由于状态正在更改，组件将更新。这意味着它会上升。你需要再次向下滚动。

我该如何解决这个问题？如何在不使用State的情况下临时存储数据？

是否有可能在“日期变化”时出现问题。在DatePicker中被触发，以改变日期＆＃39; DatePicker中的值？

提前致谢！

更新：

我发现这个http://redux-form.com/6.0.0-alpha.4/docs/faq/ReactNative.md/无状态表单管理用于反应。正如他们所说，它的支持反应原生，但我没有找到反应原生的任何例子。有人可以举个例子吗？

Answer 1

为了忽略要重新渲染的整个屏幕，您必须进行基于组件的设计。

您需要创建自己的日期选择器组件。如果你这样做只有选择器组件将被重新呈现而不是整个屏幕。

我如何让我的主要组件知道currentDate？

您可以在yourSpecialDatePicker组件中添加一个名为callback的prop，以通知主组件日期值已更改。

在示例中，this.currDate值用于将日期指定给主要组件中的值，但您不必这样做。您可以使用全局变量，也可以不做任何事情。最重要的是基于组件的方法。

var datePicker = require/filepath .. /yourSpecialDatePicker)`;

    class yourMainComponent extends Component {
     constructor(props) {
           super(props);
           this.state = { };
           this.currDate='';
          }

     render() {
       return (
        <ScrollView>
          <datePicker callBack ={(value)=>{this.currDate=value}}></datePicker>
        </ScrollView>           
       )
     }
    }

class yourSpecialDatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {currentDate:'' };
  }

  render() {
    return (
   <DatePicker
            date={this.state.currentDate}
            mode="date"
            placeholder="select date"
            format="DD-MM-YYYY"
            minDate="01-01-2015"
            maxDate="01-01-2050"
            confirmBtnText={I18n.t("confirm_button")}
            cancelBtnText={I18n.t("login_page_scan_cancel")}
            onDateChange={(date) => {this.setState({currentDate: date})
                                     this.props.callBack(date)}}
          />
    );
  }
}

React Native：填充表单而不使用状态（无状态形式）

1 个答案: