React Select 组件未显示所选值

Question

我创建了下面的 React Select 组件，它正确地填充了 50 个状态的列表。 但是我希望我选择的状态显示为字段中的值，现在它只是保持为空字符串。 我相信我的 onChange 不正确，但我不确定如何修复它以显示我选择的状态。

         <Select
            id={`${id}-jurisdiction`}
            name="jurisdiction"
            placeholderOption=" "
            labelVisual="State"
            value={jurisdiction || ''}
            onChange={(value) => setState({ jurisdiction: value })}
          >
            {JURISDICTIONS.map((currentJurisdiction) => (
              <SelectOption
                id={`jurisdiction-${currentJurisdiction}`}
                key={currentJurisdiction}
                value={currentJurisdiction}
              >
                {currentJurisdiction}
              </SelectOption>
            ))}
          </Select>

Answer 1

您需要将onChange函数更改为此

onChange={(event) => setState({ jurisdiction: event.target.value })}

event.target为您提供触发事件的元素。

因此， event.target.value检索该元素的值（在您的示例中为选择元素）。

其次，您需要将value道具更改为

value={state.jurisdiction || ""} 

因为jurisdiction是存在于state对象内部的属性。