在React里边使用antd 的 Select defaultValue失效
首先第一个问题,defaultValue为什么失效
因为react的生命周期执行顺序是,componentWillMount , render, componentDidMount
render执行的时候,defaultValue应该已经赋值完毕(这个提前赋值的形式比较多,可以在class以外赋值,可以在state初始化时赋值,也可以在componentWillMount 里赋值,也可以在render头部赋值等等等等),如此才能生效
第二个问题,我们将defaultValue设置为state动态值时,state变化,defaultValue不变化
defaultValue只会在render时执行一次,然后再怎么设置都不会变化,当我们的业务需要select多次刷新数据且需要重置数据时,应该将defaultValue替换为value,如下所示
class case extends Component {
constructor(props) {
this.state = {
value:""
}
}
onChange= (val) => {
this.setState({
value: val
})
}
render() {
return <div >
<Select
value={this.state.value}
onChange={this.onChange}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>,
</div>;
}
}
第三个问题,假如我们使用antd的Form双向绑定getFieldDecorator,我们的数据很可能是动态的,那我们怎么才能获取初始value呢?
现在我们用代码模拟实现一下,来个稍微完整的案例,Form
import React from "react"
import { Form } from "antd"
class case extends React.Component {
constructor(props) {
this.state = {
list:[]
}
}
componentDidMount(){
setTimeout(()=>{
this.setState({
list:[
{ text: "选项一", value: 1 },
{ text: "选项二", value: 2 },
]
})
},2000)
}
render() {
const {list} = this.state;
const { form: { getFieldDecorator }} = this.props;
return <Form >
<Form.Item>
{list.length > 0 && getFieldDecorator('select', {
initialValue: list.length > 0 ? list[0].value : "", // 这里可以设置一个初始值
rules: [ { required: true , message: "选项不能为空!"}]
})(
<Select>
{list.map( item => <Option key={item.value} value={item.value}>{item.text}</Option>)}
</Select>
)}
</Form.Item>
</Form >;
}
}
export default Form.create()(case)
完了