任何可以编辑标签的 React 标签输入组件？

Question

我找遍了所有地方，但似乎没有找到任何允许编辑标签的组件。目前我正在使用

https://github.com/JedWatson/react-select

这是我的代码：

 <CreatableSelect
               styles={{
                multiValueLabel: (provided, state) => ({
                  ...provided,
                  whiteSpace: "normal"
                })
              }}
              cropWithEllipsis={false}
              components={components}
              inputValue={inputValue}
              isClearable={false} 
              isMulti
              menuIsOpen={false}
              onChange={this.handleChange}
              onInputChange={this.handleInputChange}
              onBlur={this.handleBlur}
              onKeyDown={this.handleKeyDown}
              value={value}
              className={styles.questionInput}
              onValueClick={this.onValueClick}

            />

但它没有任何道具或方法来编辑只是删除的标签。 onValueClick 不执行任何操作。

我发现了这个：

https://goodies.pixabay.com/jquery/tag-editor/demo.html

但是因为我是 react/typescript 的新手，所以我不知道如何在我的 React Typescript 项目中实现它。

感谢您的帮助。

Answer 1

没关系寻找一个组件。我在网上找到了这个，它没有编辑功能，但你可以获得焦点项目，所以我尝试修改它。

https://codepen.io/srph/pen/WrPywK

class TagInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      focused: false,
      input: ''
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
    this.handleRemoveItem = this.handleRemoveItem.bind(this);
  }

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

      items: {
        display: 'inline-block',
        padding: '2px',
        border: '1px solid blue',
        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.items.map((item, i) => 
            <li key={i} style={styles.items} onClick={this.handleRemoveItem(i)}>
              {item}
              <span>(x)</span>
            </li>
          )}
          <input
            style={styles.input}
            value={this.state.input}
            onChange={this.handleInputChange}
            onKeyDown={this.handleInputKeyDown} />
        </ul>
      </label>
    );
  }

  handleInputChange(evt) {
    this.setState({ input: evt.target.value });
  }

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

      this.setState(state => ({
        items: [...state.items, value],
        input: ''
      }));
    }

    if ( this.state.items.length && evt.keyCode === 8 && !this.state.input.length ) {
      this.setState(state => ({
        items: state.items.slice(0, state.items.length - 1)
      }));
    }
  }

  handleRemoveItem(index) {
    return () => {
      this.setState(state => ({
        items: state.items.filter((item, i) => i !== index)
      }));
    }
  }
}

ReactDOM.render(
  <TagInput />,
  document.getElementById('app')
);

所以重新创建它以满足我的需要：

https://codesandbox.io/s/n03r8w74m

任何可以编辑标签的 React 标签输入组件？

Any React Tags Input Component where tags can be edited?

reactjs

react-select