react-select软件包在构建中不起作用

时间:2019-03-15 04:26:32

标签: reactjs redux react-redux redux-form react-select

我在构建时遇到此错误。

在创建反应项目的构建版本时,反应选择下拉菜单不起作用,我们还为反应选择下拉菜单添加了一些设计(CSS)。

我也想使用redux格式验证来显示错误消息。 我的错误是这样的:https://cloud.githubusercontent.com/assets/11028434/13355530/26648d8c-dca1-11e5-9776-15c795a8fb2b.gif 我的代码:

class AddArtwork extends React.Component {
    constructor(props) {
        super(props);
          this.state = {defaultval: "Select material" }
        }
    GetMedium() {
       var =materialArray[];
        materialArray = [{"value":0,"label":"Select material"}
        {"value":1,"label":"aa"},
        {"value":2,"label":"bb"},
        {"value":3,"label":"cc"},
        {"value":4,"label":"dd"},
        {"value":5,"label":"ee"},
        {"value":6,"label":"ff"},
        {"value":7,"label":"gg"}];
         return materialArray;     
        }
    MaterialDropdown = ({ input, meta ,options}) => {
    return (<div className="react-select">
            <Select
            {...input}
            onBlur={() => input.onBlur(input.value)}
            placeholder={this.state.defaultval}
            name="material"
            options={this.GetMedium()}
            />
            {   
              this.renderError(meta)
            }
            </div>);
}


render(){
 return (<form>
   <Field
     id="material"
     name="material"
     component={this.MaterialDropdown}/>
  </form>)
}
}

1 个答案:

答案 0 :(得分:0)

如果我阅读正确,则说明您使用的是redux-form。您的MaterialDropdown的道具是错误的。 redux-form不会将提供给组件的道具包装到另一个对象中。它们可以直接从props对象获得:

MaterialDropdown = ({value, onChange, ...props}) => {

    /* ... */

    <Select
        value={value}
        onChange={onChange}
        { ... }
    />

    /* ... */
}

documentation提供了将直接传递到组件的道具列表。