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 Tags输入组件？

1 个答案: