终极版形式始终返回多选反应的微件

Question

我试图用终极版，形式相同的值反应的小部件多选this example：

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); 

下面是一个父组件的代码片断这使得使用终极版形式（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> 
    ); 
    } 
    } 
} 

这里是终极版形成分与反应的微件多选组件的代码片段：

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); 

Multiselect小部件按预期工作，但提交表单始终返回类别的相同初始值。

我认为这个问题存在的事实是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)} 
     /> 
    ) 
    } 
}