鍍金池/ 問答/HTML/ 用ant design把Select二次封裝后，在render后怎么重置掉sel

用ant design把Select二次封裝后，在render后怎么重置掉select的值

export class ProjectList extends Component{
    constructor(props){
        super(props)
        this.state={
            project:[],
        }
    }
    componentDidMount(){
        axios.get('http://127.0.0.1:9090/pro/pList').then(res =>{
            this.setState({
                project:res.data.page.datas
            })
        })
    }
    render(){
        return (
                    <Select key='project' style={{width:"100%"}}  placeholder="請選擇項目">
                        {
                            this.state.project.map((item,i) =>{
                                return(
                                    <Option key={`project${i}`} value={item.id}>{item.name}</Option>
                                )
                            })
                        }
                    </Select>
        )
    }
}
class AddOrderType extends Component{
    render(){
        
        return(
            <Modal
            title="調(diào)整角色"
            wrapClassName="vertical-center-modal"
            visible={this.props.ishow}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[
                <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
                <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
                  提交
                </Button>,
              ]}
            >
            <FormItem
                {...formItemLayout}
                label="所屬項目"
                >
                {getFieldDecorator('project',{
                    rules: [{
                        required: true, 
                        message: '所屬項目!'
                    }],
                })(<ProjectList values={this.state.values} onChange={this.onChange} />)}//這里就是上面聲明的組件
            </FormItem>
            </Modal>
        )
    }
}

現(xiàn)在是個彈出框在彈出框里包含了一個這樣的select 因為很多地方都要用到這個select 所以我把select又封裝了一下?，F(xiàn)在彈出框正常 select組件也正常，但是當(dāng)用戶操作了一下select之后關(guān)閉彈出框，再次打開，這個select的值就是上次操作的值，并沒有被重置掉。如果用value賦值,會導(dǎo)致select變成無法操作的狀態(tài).如果用defaultValue的話只能在第一次加載時有效。

**

不要只說一些理論上的東西，比如通過props重置之類的含糊不清的回答，請在實踐后作出合理的回答。

**

回答
編輯回答
陪我終

在antd的表單組件里面使用value是無效的，初始化數(shù)據(jù)使用initialValue，重置數(shù)據(jù)使用resetFields，具體使用自己看api

2017年1月25日 08:25
編輯回答
喵小咪

我之前也和你遇到了一樣的困擾，react在遇到雙標(biāo)簽組件時候，如果只改變它的child，由于組件自己的props和state沒有發(fā)生變化，根據(jù)diff的算法是不會繼續(xù)遍歷其子組件，于是react就認(rèn)為這個組件是一樣的。

目前我想到的一個解決辦法是使用componentWillReceiveProps方法，通過檢查傳入的選項是否發(fā)生了改變，來重置value，達(dá)到強(qiáng)制清空的效果。

class mySelect extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = { value: [] };
    }
    ...
    componentWillReceiveProps(nextprops) {
        const { options } = nextprops, oldOpts = this.props.options;
        if ( options.length != oldOpts.length ) {
            this.setState( { value: [] } );    
        } else {
            for ( let opt of options ) {
                if ( !oldOpts.includes(opt) ) {
                    this.setState( { value: [] } );
                    break;
                }
            }
        }
    }
    ...
    render() {
        const { options } = this.props, { value } = this.state;
        const option = options.map( val => <Option key = { val }>{ val }</Option> );
        const select = (
            <Select value = { value }>{ option }</Select>
        );
        return (
            <>
                <myTag>
                    some anthor tags...
                </myTag>
                { select }
            </>
        );
    }
}

其實這個方法并不是一個最好的方法，這不符合react的編程思想，一般這種情況是由于你沒有把state統(tǒng)一管理，讓組件的state分散在各個層級，所以我建議你最好先理解react的狀態(tài)提升，讓最高層級的組件去管理它的子組件，通過props的形式傳遞state。

以這個問題為例子，其實你應(yīng)該在最上層的組件設(shè)置好一個value的state，然后以props的形式傳入Select組件，那樣Select組件便能通過this.props.value知道自己現(xiàn)在選擇的選項，當(dāng)你的選項數(shù)據(jù)發(fā)生了變化的時候，在最上層的組件setState({ value: [] })，這樣Select便會清空。

2017年8月12日 09:47
編輯回答
青瓷

這算不上封裝。
將Select組件變?yōu)槭芸亟M件就可以了。

<Select value={this.props.value} onChange={v => this.props.onChange(v)}></Select>
2018年7月27日 13:30