Reduxの形式は、常に複数選択のために同じ値が反応し、ウィジェット

Question

を返し、私は反応するウィジェット複数選択this exampleでReduxの形式を使用しようとしています：

以下

var Multiselect = ReactWidgets.Multiselect 
    , people = listOfPeople(); 

var Example = React.createClass({ 

    getInitialState() { 
    return { value: people.slice(0,2) }; 
    }, 

    _create(name){ 
    var tag = { name, id: people.length + 1 } 
    var value = this.state.value.concat(tag) 
    // add new tag to the data list 
    people.push(tag) 
    //add new tag to the list of values 
    this.setState({ value }) 
    }, 

    render(){ 
    // create a tag object 
    return (
     <Multiselect data={people} 
     value={this.state.value} 
     textField="name" 
     onCreate={this._create} 
     onChange={value => this.setState({ value })}/> 
    ) 
    } 
}); 

ReactDOM.render(<Example/>, mountNode); 

はの使用を作る親コンポーネントのコードスニペットですReduxのフォーム（EditVideoコンポーネント）コンポーネント（のonSubmitメソッドのコメントを見てください）：

class VideoEdit extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    onSubmit = (values) => { 

    console.log(values.categories) // always returns initialValues for categories, new values not adding 

    } 

    render() { 
    const { loading, videoEdit, categories } = this.props;  

    if (loading) { 
     return (
     <div>{ /* loading... */}</div> 
    ); 
    } else { 
     return (
     <div>   
      <h2>Edit: {videoEdit.title}</h2> 
      <EditVideo 
      onSubmit={this.onSubmit} 
      initialValues={videoEdit} 
      categories={categories} 
      /> 
     </div> 
    ); 
    } 
    } 
} 

そして、ここに反応するウィジェット複数選択成分とReduxのフォームコンポーネントのコードスニペットです：

class CategoryWidget extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     value: this.props.defValue, 
     extData: this.props.data 
    } 

    this._create = this._create.bind(this); 
    } 

    _create(name) { 
    var tag = { name, id: this.state.extData.length + 100 + 1 } 

    var value = this.state.value.concat(tag) 
    var extData = this.state.extData.concat(tag) 

    this.setState({ 
     extData, 
     value 
    }) 
    } 

    render() { 
    return (
     <Multiselect 
     {...this.props.input} 
     data={this.state.extData} 
     onBlur={() => this.props.input.onBlur()} 
     value={this.state.value || []} 
     valueField="id" 
     textField="name" 
     onCreate={this._create} 
     onChange={value => this.setState({ value })} 
     /> 
    ) 
    } 
} 

const EditVideoForm = (props) => { 

    const { handleSubmit, submitting, onSubmit, categories, initialValues, defBook } = props; 

    return (
    <Form name="ytvideo" onSubmit={handleSubmit(onSubmit)}>  
     <div> 
     <Field 
      name="categories" 
      component={CategoryWidget} 
      data={categories} 
      defValue={initialValues.categories} 
     /> 
     </div> 
     <br /> 
     <Button color="primary" type="submit" disabled={submitting}> 
     Submit 
     </Button> 
    </Form> 
); 
}; 

export default reduxForm({ 
    form: 'videoEdit', 
    enableReinitialize: true 
})(EditVideoForm); 

ウィジェットは期待どおりに動作しますが、submitのフォームは常にカテゴリに対して同じ初期値を返します。

私はこの問題は、CategoryWidgetは、クラスベースのコンポーネントであるという事実に産む信じますか？もしそうなら、それを動作させる方法は何ですか？ここで

Answer 1

は、私は最後に私のMultiselectのためにやっていることです：

class CategoryWidget extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     value: this.props.defValue, 
     extData: this.props.data 
    } 

    this._create = this._create.bind(this); 
    } 

    _create(name) { 
    var tag = { name, id: this.state.extData.length + 100 + 1 } 

    var value = this.state.value.concat(tag) 
    var extData = this.state.extData.concat(tag) 

    this.setState({ 
     extData, 
     value 
    }) 
    } 

    componentDidUpdate() { 
    let { onChange } = this.props.input 
    onChange(this.state.value) 
    } 

    handleOnChange(value) { 
    this.setState({ value }) 
    } 

    render() { 
    const input = this.props.input 
    return (
     <Multiselect 
     {...input} 
     data={this.state.extData} 
     onBlur={() => input.onBlur()} 
     value={this.state.value || []} 
     valueField="id" 
     textField="name" 
     onCreate={this._create} 
     onChange={value => this.handleOnChange(value)} 
     /> 
    ) 
    } 
}