선택된 옵션이 선택되지 않은 상태

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

출처

2017-01-24 newBike

Redux 양식''은 [여기에 설명 된대로] (http://redux-form.com/6.4.3/docs/api/Field.md/) 다양한 소품을 사용해야합니다. – gustavohenke

사용하지 않음, 디스패치 작업은 여전히 onChange 메서드 내에서 작동하지 않습니다. – newBike

또 다른 형태에 다른 데이터를 가져 오기 및 렌더링하는 작업을 해고해야한다. '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> 
    ) 
    } 
}

당신은 또한 요소의 "onChange가"이벤트를 사용하고 REDUX-형태로 결합 할 수 없습니다 "onChange가"소품?

출처

2017-02-03 22:58:42 jlau

선택된 옵션이 선택되지 않은 상태

답변

관련 문제