react-select 如何编辑创建的条目

Posted 2023-02-21

【中文标题】react-select 如何编辑创建的条目

【英文标题】：react-select how to edit created entries

【发布时间】：2017-11-09 21:40:50

【问题描述】：

我正在使用 Select.AsyncCreatable：

<Select.AsyncCreatable
      clearableValue=true
      multi=true
      scrollMenuIntoView=true
      name="field-name"
      value=values
      loadOptions=this.getOptions
      onChange=value => 
        this.handleOnChange(value...)
      
      placeholder=this.defaultPlaceholder
      />

如何编辑我创建的选项。我可以删除创建的选项并重新输入它们，但是否有编辑选定值的选项？会更舒服。

【问题讨论】：

您找到解决方案了吗？我也在苦苦挣扎，不确定唯一的解决方案是否是转储整个 react-select 组件？

也许github.com/JedWatson/react-select/issues/… 有帮助。

@marcel 我设法编辑了一个自定义标签，请查看***.com/q/49598138

您是否成功地完成了这项工作？我也需要这个。

【参考方案1】：

不知道如何使用 react-select，但我认为您正在寻找的是 editable-creatable-multiselect

这是一个演示：

【参考方案2】：

我真的找不到任何解决方案，所以我只是修改了我在网上找到的内容并使其可编辑：

https://codesandbox.io/s/n4nqrjw564

希望对您有所帮助。

编辑添加代码：

import React from "react";

const initialValues = [
   label: "Test1", value: "Test1" ,
   label: "Test2", value: "Test2" ,
   label: "Test3", value: "Test3" 
];

const createOption = label => (
  label,
  value: label
);

export default class TagsInput extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      //value: [],
      value: initialValues,
      focused: false,
      inputValue: ""
    ;

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
    this.handleEditItem = this.handleEditItem.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  

  render() 
    const styles = 
      container: 
        border: "1px solid #ddd",
        padding: "5px",
        borderRadius: "5px"
      ,

      items: 
        display: "inline-block",
        padding: "2px",
        border: "1px solid black",
        fontFamily: "Helvetica, sans-serif",
        borderRadius: "5px",
        marginRight: "5px",
        cursor: "pointer"
      ,

      input: 
        outline: "none",
        border: "none",
        fontSize: "14px",
        fontFamily: "Helvetica, sans-serif"
      
    ;
    return (
      <label>
        <ul style=styles.container>
          this.state.value.map((item, i) => (
            <li key=i style=styles.items onClick=this.handleEditItem(i)>
              item.label
            </li>
          ))
          <input
            style=styles.input
            value=this.state.inputValue
            onChange=this.handleInputChange
            onKeyDown=this.handleInputKeyDown
            onBlur=this.handleBlur
          />
        </ul>
      </label>
    );
  

  handleBlur(evt) 
    const  value  = evt.target;

    if (value !== "") 
      this.setState(state => (
        value: [...state.value, createOption(value)],
        inputValue: ""
      ));
    

    console.log(this.state.value);
  

  handleInputChange(evt) 
    this.setState( inputValue: evt.target.value );
  

  handleInputKeyDown(evt) 
    if (evt.keyCode === 13) 
      const  value  = evt.target;

      if (value !== "") 
        this.setState(state => (
          value: [...state.value, createOption(value)],
          inputValue: ""
        ));
      
    

    if (evt.keyCode === 9) 
      const  value  = evt.target;

      if (value !== "") 
        this.setState(state => (
          value: [...state.value, createOption(value)],
          inputValue: ""
        ));
      
    

    if (
      this.state.value.length &&
      evt.keyCode === 8 &&
      !this.state.inputValue.length
    ) 
      this.setState(state => (
        value: state.value.slice(0, state.value.length - 1)
      ));
    

    console.log(this.state.value);
  

  handleEditItem(index) 
    return () => 
      let it = this.state.value.filter((item, i) => i === index);
      console.log(it);
      this.setState(state => (
        value: state.value.filter((item, i) => i !== index),
        inputValue: it[0].label
      ));
      //need to change to text box or open a new textbox
    ;