在 reactstrap 的 Select (Input) 中设置值

Posted 2023-03-23

【中文标题】在 reactstrap 的 Select (Input) 中设置值

【英文标题】：Set value in Select (Input) of reactstrap

【发布时间】：2021-06-12 23:06:04

【问题描述】：

代码：

const [frequency, setFrequency] = useState();

function handleSelect(event) 
    const target = event.target;
    const value = target.value;
    const name = target.name;
    setFrequency(
        ...frequency,
        [name]: value
    )
 

<FormGroup>
    <Label for="exampleSelect">Select</Label>
    <Input type="select" name="select" id="exampleSelect" onChange= handleSelect >
    // I tried the below, But it does not seem to work
    <Input type="select" name="frequency" id="frequency" value=frequency.frequency>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Input>
  </FormGroup>

下拉菜单：

所选值：

当我选择它在输入中呈现的值但当我想设置所选值时。

意思是，我想设置这个值，这样当我加载它时，它应该从选定的值开始，而不是从1。

那么我该如何设置值呢？

我可以通过调用一些选择函数来setState。但是在输入标签中我只想要一个值，所以当我刷新下拉列表时应该显示xyx...1,2,3,4。

【问题讨论】：

如果您想在重新加载浏览器窗口时保留state，您需要某种持久存储，例如 redis、localStorage 或 sessionStorage。

我有想要输入的值...这只是我想在输入中设置值的示例。假设我选择了值 3...它在 Input 中呈现...但是假设我尝试如下： On refresh Dropdown应该将值呈现为 xyz，然后是 1,2,3,4...等等。我只想为输入赋予价值，以便它可以呈现该值。我希望我的问题现在很清楚了

那么Dropdown不是选择1作为初始值吗？您希望它在加载时始终选择“xyz”吗？

Dropdown 确实选择了值并呈现它.....但我总是希望它在加载时选择“xyz”。

那为什么不把它作为第一个选项加入呢？

【参考方案1】：

如果你写value="xyx"，无论你选择什么选项，select 的值总是xyz。

因此，您可以提供来自反应状态的value 和handleChange 函数来更改选择值。

如果你想在开始时选择“第一个选项”，即xyz，你可以用xyz初始化状态：

export default function App() 
  const [frequency, setFrequency] = useState( frequency: "xyz" );

  function handleSelect(e) 
    setFrequency((prev) => (
      ...prev,
      [e.target.name]: e.target.value,
    ))
  

  return (
    <>
      JSON.stringify(frequency)
      <FormGroup>
        <Label for="exampleSelect">Select</Label>
        <Input
          type="select"
          name="frequency"
          id="frequency"
          value=frequency.frequency
          onChange=handleSelect
        >
          <option>xyz</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </Input>
      </FormGroup>
    </>
  );

这是demo

【讨论】：

感谢您的宝贵时间，但它不起作用，我已经编辑了我的问题。当我传递该值时，它似乎没有任何效果。它仅从默认值加载，即在加载时呈现 xyz。我只想在重新加载时呈现选定的值

只有当我将输入类型更改为文本而不是选择时才会呈现值

它工作得很好......我传递的变量名中有错字导致了这个问题。感谢您的时间。欢呼:)。