任何可以编辑标签的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