redux-formフィールドの値は単なる文字列ではなくオブジェクトを保持できますか？

Question

redux-formフィールドの値は単なる文字列ではなくオブジェクトを保持できますか？

は 'SelectQuestion'

class SelectQuestions extends Component{ 
      render(){ 
    const {fields:{question1,question2},handleSubmit}=this.props; 
    return <div> 
    <form onSubmit={handleSumbit(this.handleFunction.bind(this))}> 
     <SelectQuestion {...question1}/> 
     <SelectQuestion {...question1}/> 
     <button type="submit" className="btn btn-default">Submit</button> 
    </form> 
    </div> 
    } 
    } 
class SelectQuestion extends Component{ 

render(){ 

<select></select> 
}  

} 

たとえば、次の点を考慮各質問の質問IDと質問名を持つ、質問配列をとります。

ユーザーが質問を選択すると、QuesionIdとQuesitonNameを返すようにしました。どのようにそれは反応で還元型を使用して達成することができます

Answer 1

私は2つの仮想フィールドselectedQuestionIdとselectedQuestionNameを作成することです達成するより良い方法だと思います。これらのフィールドは表示されません。

setSelectedQuestion = (event) => { 
    var questionName = event.target.name; //or something like that 
    var questionId = event.target.id; //or something like that 
    this.props.fields.selectedQuestionName.onChange(questionName); 
    this.props.fields.selectedQuestionId.onChange(questionId); 
} 

onChangeをプログラム値を設定するReduxのフォームフィールドに呼び出すことができる。その後、各SelectQuestionのようなコールバックをトリガーすることができます。

Answer 2

はい、値は複雑なオブジェクトにすることができます。それを実証する例もあります。

Complex Values Example

Answer 3

TL：DR

はい、オブジェクトを保持することができます。あなたはこのようなあなたの選択を定義することができ、選択のために

： https://codesandbox.io/s/vq6k6195rl

説明：この例をチェックアウト

const myFancyQuestions = [ 
    { id: 1, label: 'Why?', category: 'Asking why' }, 
    { id: 2, label: 'Who?', category: 'Asking who' }, 
    { id: 3, label: 'When?', category: 'Asking when' } 
]; 

は、次にフィールドコンポーネントを使用してコンポーネントを包みます。

<Field component={ObjectSelect} name="myFancySelect" options={myFancyQuestions}/> 

そしてちょうどあなたのレンダリングでそれを示しています

class ObjectSelect extends React.Component { 
    render() { 
    const { input, multiple, options, value, ...rest } = this.props; 
    const parse = event => { 
     // This is what redux-form will hold: 
     return JSON.parse(event.target.value); 
    } 
    return (
     <select 
     onBlur={event => input.onBlur(parse(event))} 
     onChange={event => input.onChange(parse(event))} 
     {...rest}> 
      {options.map(option => 
      <option key={option.id} 
        value={JSON.stringify(option)} 
        selected={input.value.id == option.id}> 
       {option.label} 
      </option>)} 
     </select> 
    ) 
    } 
}