選択オプションが選択されていない状態

Question

3秒デモに復元されますhttps://www.youtube.com/watch?v=bo2nNQXbhI8&feature=youtu.be

https://gist.github.com/weichenghsu/407a8862f3382a425fb531b3dedcd6f5

タイトルとして、選択されたオプションは

そしてonChange方法がためには効果がありません非選択の状態に復元されます公式のチュートリアルの例。

私の使用例は、ユーザーがドロップダウンから値を選択する場合です。それは私が反応し、ネイティブピッカーと同様の問題に頭を叩いた

const chooseTable = ({items, meta:{touched, error}}) => (
      <select 
       onChange={event => { 
        console.log(this.props.fields); 
        this.props.tableNameOnChange(event.target.value); 
      }}> 
       <option value="">Select</option> 
       { 

        items.map((item :any, i: integer) => 
         <option key={item.id} value={item.id}>{item.name}</option> 
        ) 
       } 
      </select> 
    ) 

        <Field component={chooseTable} 
          items={schemaData.tableList} 
          name="tableName" 

        > 
         {/*<option value="#ff0000">Red</option>*/} 
         {/*<option value="#00ff00">Green</option>*/} 
         {/*<option value="#0000ff">Blue</option>*/} 
        </Field> 

      UIBuilderForm = reduxForm({ 
       form: 'dashbaordUiBuilderForm', 
       fields: ['tableName'] 
      } 
      }) 
      (UIBuilderForm as any); 

      // Decorate with connect to read form values 
      const selector = formValueSelector('dashbaordUiBuilderForm') 

      // export default connect(mapStateToProps, mapDispatchToProps)(UIBuilderForm); 
      export default connect(state => { 
       const TableSchemaName = selector(state, 'TableSchemaName') 
       return { 
        TableSchemaName 
       } 
      } 

Answer 1

別のフォーム上の他のデータを取得し、レンダリングするアクションを発射する必要があります。ステートレス関数の代わりに 'chooseTable'をコンポーネントとして記述し、 'this.state'と 'this.setState'を使用して、どの値が選択されているかを参照してください。ここに私のピッカーコードからの例です：

class ExpirePicker extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     selected: 'ASAP' 
    } 
    } 

    render() { 
    const { input: { onChange, ...rest }} = this.props 
    return (
     <Picker 
     style={style.input} 
     selectedValue={this.state.selected} 
     onValueChange={(value) => { 
      this.setState({selected: value}) 
      onChange(value) 
     }} 
     {...rest}> 
     {Object.keys(ExpireTypes).map(renderItem)} 
     </Picker> 
    ) 
    } 
} 

あなたもReduxの-フォームにバインドする要素の「のonChange」イベントを使用していないことでした「のonChange」小道具？