我在构建时遇到此错误。
在创建反应项目的构建版本时,反应选择下拉菜单不起作用,我们还为反应选择下拉菜单添加了一些设计(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>)
}
}
答案 0 :(得分:0)
如果我阅读正确,则说明您使用的是redux-form
。您的MaterialDropdown
的道具是错误的。 redux-form
不会将提供给组件的道具包装到另一个对象中。它们可以直接从props对象获得:
MaterialDropdown = ({value, onChange, ...props}) => {
/* ... */
<Select
value={value}
onChange={onChange}
{ ... }
/>
/* ... */
}
documentation提供了将直接传递到组件的道具列表。