ant Design 中select控件，如何js控制选中的值

Question

<Select defaultValue='全部' style={{ width: 200 }} onChange={this.selectShopChange}>

这里可以拿到点击了某个options后的value,但是现在我想控制选中了哪一个(比如点击了其他地方，让他选择第二个)，vue里面双向绑定没有这个问题，react里面该如何操作？

Answer 1

使用 value 属性，而不是 defaultValue，这样 select 就是一个受控组件了

const Demo = () => {
  
  const [value, setValue] = React.useState('lucy');

  const handleChange = e => {
    setValue(e);
  };
  
  return (
    <>
    <Select value={value} style={{ width: 120,marginRight: 10 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <Button type="primary" onClick={()=>setValue('jack')}>选中jack</Button>
  </>
  )
}

可以查看这个 demo https://codepen.io/xboxyan/pe...