时间戳

首页 > 解决方案 > 在反应引导程序中编辑时在选择字段中显示变量的内容

javascript - 在反应引导程序中编辑时在选择字段中显示变量的内容

问题描述

以编辑的形式，我有input select. 在框架ant design中，变量的内容status显示在输入字段中。有用。在react-bootstrap框架中，显示变量内容的尝试status不起作用。如何在输入字段中设置此值？

框架 Ant 设计

 const status = 'P'; 

  <Select 
    style={{ width: 170 }}
    value={status}
    onChange={(e) => this.props.handleChangeStatus(e)}>
      <Option value="0">N</Option>
      <Option value="10">P</Option>
      <Option value="20">O</Option>
  </Select>

框架反应引导

  <Form.Control 
    as="select" 
    value ={status}
    onChange={(e) => this.props.handleChangeStatus(e)}
  >
    <option value="0">N</option>
    <option value="10">P</option>
    <option value="20">O</option>
  </Form.Control>

标签： javascriptreactjsbootstrap-4react-bootstrap

解决方案

你可以像这样使用 react-bootstrap 下拉菜单：

import React from "react";
import ReactDOM from "react-dom";
import { Form, DropdownButton, Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

function App() {
  const [value, setvalue] = React.useState("");
  const handleDropdown = e => {
    setvalue(e.target.name);
  };
  return (
    <div className="App">
      <Form>
        <DropdownButton
          className="my-2"
          title={value === "" ? "select speaker" : value}
        >
          <Dropdown.Item name="Value 1" onClick={e => handleDropdown(e)}>
            Value 1
          </Dropdown.Item>
          <Dropdown.Item name="Value 2" onClick={e => handleDropdown(e)}>
            Value 2
          </Dropdown.Item>
        </DropdownButton>
      </Form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

还要检查这个沙箱以获得更好的理解。

推荐阅读