React Native:不使用状态填充表单(无状态表单)

Question

我有一个表单，在滚动视图中。表格中很少有问题，例如启动或日期选择。查看代码:

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

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

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

是可能的，当'onDateChange'在DatePicker被触发，以改变'日期'值在DatePicker?

提前感谢!

---

更新:

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

Answer 1

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

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

---

如何让我的主组件知道currentDate ?

---

• 你可以在你的yourSpecialDatePicker组件中添加一个名为callback的道具来通知你的主组件日期值被改变了。

在这个例子中。currDate value用于将日期赋值给主组件中的值，但你不必这样做。您可以使用全局变量，也可以什么都不做，这取决于您。这里最重要的是基于组件的方法。

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