Question

我有一个简单的列表，我在其中使用 Select 显示循环的 .map。

一切正常，但每个 select 的初始默认值不是我的数组列表中的值。

如何为列表中的每个选择设置 defaultValue？

https://codesandbox.io/s/festive-robinson-847oj?file=/src/App.js:0-1435

import React, { useState } from "react";
import Select from "react-select";

function SelectItem(props) {
  const [value, setValue] = React.useState(props.list[0]);

  return (
    <Select
      options={props.list}
      onChange={(newValue) => {
        setValue(newValue);
        props.onChange(newValue.value);
      }}
      value={value}
    />
  );
}

export default () => {
  const animationsList = [
    { value: "animation1", label: "Dance" },
    { value: "animation2", label: "Flip" },
    { value: "animation3", label: "Salsa" }
  ];

  const reactList = [
    {
      id: "1",
      animation: "animation1"
    },
    {
      id: "2",
      animation: "animation2"
    },
    {
      id: "3",
      animation: "animation3"
    }
  ];

  const [links, setLinks] = useState(reactList);

  const onChange = (index, animation) => {
    const cloneLinks = [...links];
    cloneLinks[index].animation = animation;
    setLinks(cloneLinks);
    console.log(cloneLinks);
  };

  return (
    <div>
      <ul>
        <div>
          {links.map((url, indexurl) => (
            <li key={url.id}>
              <div>
                <SelectItem
                  onChange={(animation) => onChange(indexurl, animation)}
                  list={animationsList}
                  defaultValue={url.animation.value}
                />
              </div>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

Answer 1

不需要 SelectItem 组件中的新状态。

value 或 defaultValue 必须是列表中用于选项的对象。

这是更新后的 CSB。

function SelectItem(props) {
  return (
    <Select
      options={props.list}
      onChange={(newValue) => {
        props.onChange(newValue.value);
      }}
      value={props.value}
    />
  );
}

export default () => {
  const animationsList = [
    { value: "animation1", label: "Dance" },
    { value: "animation2", label: "Flip" },
    { value: "animation3", label: "Salsa" }
  ];

  const reactList = [
    {
      id: "1",
      animation: "animation1"
    },
    {
      id: "2",
      animation: "animation2"
    },
    {
      id: "3",
      animation: "animation3"
    }
  ];

  const [links, setLinks] = useState(reactList);

  const onChange = (index, animation) => {
    const cloneLinks = [...links];
    cloneLinks[index].animation = animation;
    setLinks(cloneLinks);
    console.log(cloneLinks);
  };

  return (
    <div>
      <ul>
        <div>
          {links.map((url, indexurl) => (
            <li key={url.id}>
              <div>
                <SelectItem
                  onChange={(animation) => onChange(indexurl, animation)}
                  list={animationsList}
                  value={animationsList.find(
                    (aL) => aL.value === url.animation
                  )}
                />
              </div>
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

反应：反应选择的默认值

1 个答案: