get refs antd组件如何选择antd的值？答案

【问题标题】：How the get refs antd componement Select value of antd?get refs antd组件如何选择antd的值？
【发布时间】：2019-03-14 12:57:27
【问题描述】：

我尝试使用最新版本的 antd(3.10.0) 和 react(16.5.2)。

我根据https://reactjs.org/docs/refs-and-the-dom.html使用新的ref方式

this.myRef = React.createRef();

当它撕裂时，应该是：

rend(){
                    <Select style={{ width: 200 }} ref={this.myRef}>
                    {Object.entries(this.state.catedict)
                        .map(en => <Option key={en[0]}>{en[1]}</Option>)}
                </Select>
}

但是当我想获取 Input 或 Select 的值时

我尝试：

console.log(this.myRef.current.value);

但只会得到错误的结果。

我什至发现：

console.log(this.myRef.current);

结果是：

t {props: {…}, context: {…}, refs: {…}, updater: {…}, saveSelect: ƒ, …}
context: {}
props: {style: {…}, children: Array(2), prefixCls: "ant-select", showSearch: false, transitionName: "slide-up", …}
rcSelect: t {props: {…}, context: {…}, refs: {…}, updater: {…}, onInputChange: ƒ, …}
refs: {}
renderSelect: ƒ (n)
saveSelect: ƒ (n)
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: Na {tag: 2, key: null, type: ƒ, stateNode: t, return: Na, …}
__proto__: v

我想给出 Select 的值。我该怎么办？

【问题讨论】：

标签： javascript reactjs components antd

【解决方案1】：

每次更改都保存Select 的值！并在需要时使用它。

<Select style={{ width: 200 }} onChange={(value)=>{
    this.selectValue = value;
}}>

并在其他地方使用它：

console.log('Select Value', this.selectValue)

【讨论】：

【解决方案2】：

可以通过 ref 获取，antd select 是 rc-select 的 hoc，如果要获取值，还是通过 ref.rcSelect 获取

`the react dom`
<Select ref={r => this.ctryListRef = r} />

`the js code`
console.log(this.ctryListRef.rcSelect.state.value)

通过rcSelect.state.value，可以得到值。

另外，还可以获取antd textArea的值，只是另外一个hoc~

【讨论】：