我正在使用 antd deign 来显示 select 选项，但 select 无法读取提供的 ID，也无法更新 onChange

Question

我正在使用 antd deign 来显示 select 选项，但 select 无法读取提供的 ID，也无法更新 onChange。

import React from "react";


const data = {
  orgName: "",
  orgRegNo: "",
  orgType: "",

  orgTypes: [
    { id: "1", name: "Vendor" },
    { id: "2", name: "Supplier" },
    { id: "3", name: "Vendor and Supplier" }
  ]
};



export const MyContextTSX = React.createContext(data);

const Store = (props: any) => {
  return (
    <MyContextTSX.Provider value={data}>{props.children}</MyContextTSX.Provider>
  );
};

export default Store;

//React注册下一页

const signinData = useContext(MyContextTSX);


const [values, setValues] = useState(signinData);

<Select
                  id={values.orgTypes.id}  //shows error while showing id
                  // name={values.orgTypes.name}
                  defaultValue="Choose"
                  style={{ width: 150 }}
                  onChange={(value: any) => //cant perform onChange
                    setValues({ ...value, name: value })
                  }
                >
                  {values.orgTypes.map((option: any) => (
                    <Option
                      key={option.id}
                      value={option.name}
                      // onChange={handleChange}
                    >
                      {option.name}
                    </Option>
                  ))}
                </Select>

我正在使用 antd deign 来显示 select 选项，但 select 无法读取提供的 ID，也无法更新 onChange。

Link to CodeSandbox

Answer 1

你的代码有很多问题：

id={values.orgTypes.id} // orgTypes is an array, use values.orgTypes[0].id

---

onChange={(
  value: any // value is the Select.Option value
  ) => setValues({ ...value, name: value })} // What exatcly you trying to do here?

此外，您没有指定类型（并使用 Typescript）。

检查这个工作示例 (Javascript):

const data = {
  orgName: '',
  orgRegNo: '',
  orgType: '',

  orgTypes: [
    { id: '1', name: 'Vendor' },
    { id: '2', name: 'Supplier' },
    { id: '3', name: 'Vendor and Supplier' }
  ]
};

const MyContextTSX = React.createContext(data);
function Signup() {
  const signinData = useContext(MyContextTSX);
  const [selected, setSelected] = useState();

  return (
    <div>
      <h1>Selected: {selected}</h1>
      <Select
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={value => setSelected(value)}
      >
        {signinData.orgTypes.map(option => (
          <Select.Option key={option.id} value={option.name}>
            {option.name}
          </Select.Option>
        ))}
      </Select>
    </div>
  );
}

演示：

Answer 2

您的代码中几乎没有问题。

首先，您正试图从数组orgTypes 访问id。相反，您可以定义一个普通的 id。

其次，你需要有一个 contextProvider 包装你的 App 组件

第三。您需要以正确的格式更新状态，这样您就不会更新数据，而是更新选定的值。为此，您需要有一个选定值的状态

相关代码

index.js

ReactDOM(
  <Store>
    <App />
  </Store>,
  document.getElementById("root")
);

useForm.js

import { useContext, useState } from "react";

import { MyContextTSX } from "./Store";

const useForm = ({ callback }) => {
  const values = useContext(MyContextTSX);
  const [selected, setSelected] = useState({});

  return { values, selected, setSelected };
};

export default useForm;

Register.js

const Register = () => {
  const { values, selected, setSelected } = useForm({});
  return (
    <React.Fragment>
      <Select
        id={"select"} //shows error here
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={(
          value: any //what to do here ?
        ) => setSelected(selected)} //what to do here ?
      >
        {values.orgTypes.map((option: any) => (
          <Option key={option.id} value={option.name}>
            {option.name}
          </Option>
        ))}
      </Select>
      <button onClick={() => console.log(values.orgTypes)}>Test</button>
    </React.Fragment>
  );
};

Answer 3

稍微调整一下@Dennish Vash 的答案，注册函数也可以这样写

function Signup() {
  const signinData = useContext(MyContextTSX);
  const [selected, setSelected] = useState();

  return (
    <div>
      <h1>Selected: {selected}</h1>
      <Select
        defaultValue="Choose"
        style={{ width: 150 }}
        onChange={value => setSelected(value)}
      >
        {signinData.orgTypes.map(option => (
        <Option value="{option.id}">{option.name}</Option>
  
        ))}
      </Select>
    </div>
  );
}

参考：https://github.dev/ant-design/ant-design/tree/master/components/select/demo

我正在使用 antd deign 来显示 select 选项，但 select 无法读取提供的 ID，也无法更新 onChange

I am using antd deign to show select option but select cant read id provided and also cannot update onChange

react-hooks

antd

react-context