javascript - 有什么方法可以从浏览器中使用 jquery 触发 react-select 下拉菜单？

Question

<select id="selelct-dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

对于像这样的正常选择，我可以使用

$('#select-dropdown').val(1)

但是当我使用 react-select 时，浏览器中没有显示选择标签或选项标签有没有办法通过 jquery 更改 react-select 下拉值？

标签： javascriptjqueryreactjsreact-select

Answer 1

您实际上并不需要使用 jquery，而是维护字段的状态，然后使用值设置状态。根据 react-select 的文档：

        import React, { Component, useState } from 'react'
        import Select from 'react-select'
        
        const options = [
          { value: 'chocolate', label: 'Chocolate' },
          { value: 'strawberry', label: 'Strawberry' },
          { value: 'vanilla', label: 'Vanilla' }
        ]
        
        const MyComponent = () => {
          const [value, setValue] = useState('')
          return (
          <Select options={options} value={value} onChange={(e) => 
            setValue(e.target.value)} />
           )
        }
export default MyComponent;