React Native：状態を使用しないフォーム（ステートレスフォーム）

Question

私はスクロールビュー内にフォームを持っています。例えばstarratingやdatepickerのような形での質問はほとんどありません。あなたは上記のコードで見たようあなたが値を変更すると、それはthis.state.currentDateを更新し、それはまた、現在選択されている日付としてthis.state.currentDateを示し、

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

：コードを参照してください。 。それは問題はありませんが、フォームを埋めるためにスクロールダウンし、値を変更するとsetStateが呼び出され、状態が変化しているのでコンポーネントが更新されます。それは上がるこ​​とを意味します。もう一度スクロールする必要があります。

どうすればこの問題を解決できますか？ Stateを使用せずにデータを一時的に保存するにはどうすればよいですか？

DatePickerの 'onDateChange'がトリガされているときに、DatePickerの 'date'値を変更することは可能ですか？

ありがとうございます！

---

UPDATE：

私が反応するため、このhttp://redux-form.com/6.0.0-alpha.4/docs/faq/ReactNative.md/、ステートレスフォームの管理を見つけました。彼らが言っているように、それは反応ネイティブですが、私は反応ネイティブの例は見つかりませんでした。誰かが例を挙げてくれますか？

Answer 1

全画面を再描画しないようにするには、コンポーネントベースのデザインを作成する必要があります。

日付ピッカーコンポーネントを独自に作成する必要があります。そうした場合、ピッカーコンポーネントのみが再レンダリングされます全画面ではありません。

---

どうすれば私の主なコンポーネントにcurrentDateを知らせることができますか？

---

• あなたは、日付の値が変更されたあなたの主なコンポーネントを通知するために、あなたのyourSpecialDatePickerコンポーネントにコールバックと呼ばれる小道具を追加することができます。

例では、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)}} 
      /> 
    ); 
    } 
}