反应：下拉值到文本字段

Question

开始尝试从原始 HTML 中学习 React，我并没有真正理解某些对象和事件与数组的链接。

基本上我希望有一个用户可以选择一个选项的下拉菜单，然后让该下拉菜单用数组内部的某些值填充一些文本字段。

在这种情况下，文本字段 1 读取文件类型，文本字段 2 读取位深度

当前代码如下。注意，使用频谱组件所以 sp-picker 而不是 dropdown

我不知道如何让处理程序读取除事件之外的任何内容，并且很可能这段代码完全是错误的方法。

任何建议将不胜感激。

import React, { useState } from "react";


const SaveOptions = () => {

    //Default Options HOOKS

    const [filetype, setFileType] = useState("TIFF");
    const [textfieldValue, setTextfieldValue] = useState("16");

    //ARRAY

    const filetypeOptionsArray = [
        { name: "TIFF", extention: "TIFF", bitdepth: "16" },
        { name: "PSD", extention: "PSD", bitdepth: "16" },
        { name: "JPG", extention: "JPG", bitdepth: "8" },
    ]

    // Handlers

    const handleFiletypeChange = (e) => {

        setFileType(e.target.value);
        setTextfieldValue(e.target.value);

    };

    return (

        <div style={{ border: "1px solid #555", padding: "5px", borderRadius: "5px" }}>

            <div className="row" >
                <sp-picker size="s" style={{ flexGrow: 1 }}>
                    <sp-menu slot="options" onClick={handleFiletypeChange}>
                        {
                            filetypeOptionsArray.map((e) => {
                                return <sp-menu-item selected={filetype === e.value ? true : null} key={e.name} value={e.name}>{e.name}</sp-menu-item>
                            })
                        }
                    </sp-menu>
                </sp-picker>

            </div>

            <sp-textfield value={filetype}></sp-textfield>
            <sp-textfield value={textfieldValue}></sp-textfield>

        </div>
    );
}

export default SaveOptions;

Answer 1

我相信这就是你想要做的。您的大部分代码都是正确的，只是您将 onChange 函数附加到 onClick 属性而不是 onChange 属性

我在下面附上了一个基本示例，因为您在代码中使用了我无权访问的自定义 html 元素。

const people = [
  {
    name: "John Doe",
    age: 26,
  },
  {
    name: "Jason Bourne",
    age: 32,
  },
  {
    name: "Steve Wang",
    age: 19,
  },
];

function App() {
  const [option, setOption] = React.useState(null);
  const [text, setText] = React.useState("");

  const onChange = (ev) => {
    const val = ev.target.value;
    setOption(val);

    const person = people[val];
    if (person) {
      setText(person.name + " is " + person.age);
    }
  };

  return (
    <div>
      <select value={option} onChange={onChange}>
        {people.map((person, index) => (
          <option value={index} key={index}>
            {person.name}
          </option>
        ))}
      </select>

      <br />

      <input
        type="text"
        value={text}
        onChange={(ev) => setText(ev.target.value)}
      />
    </div>
  );
}

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

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>