javascript - 删除选择框reactJS中出现的编辑和删除按钮

Question

我是 reactJS 的新手。我有一个选择。

我想在选择选项中添加删除和编辑按钮。

这是我试过的代码，

<Select
    style={{ width: 240 }}
    placeholder="Choose Web Analytics Configuration"
    dropdownRender={menu => (
    <div>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div
            style={{ padding: '4px 8px', cursor: 'pointer' }}
            onMouseDown={e => e.preventDefault()}
            onClick={this.openModal.bind(this)}
        >
            <Icon type="plus" /> Add  Database
        </div>
    </div>
    )}
        >
    {dbConfigList.map(item => (
        <Option  key={item}>{item} 
        <Icon onClick={this.editFun.bind(this)} type="edit" style={{ fontSize: '20px', color: 'green' }} theme="outlined" /> 
        <Icon onClick={this.deleteFun.bind(this)} type="delete" style={{ fontSize: '20px', color: '#CC160B' }} theme="outlined" /> 
        </Option>

    ))}
</Select>

我已经成功添加了按钮。看起来像这样:

但是当用户选择该选项时，编辑和删除按钮会出现在选择框中。我只需要显示名称而不是按钮。

这里看起来像，

帮我解决这个问题，在每个选项的 dropdown 菜单中，我希望编辑和删除按钮出现在右上角。现在它出现在文本之后。我可以为此使用 margin 。但是每个名字的大小都不同。前任。一些名称将是 6 个字符，一些将超过 6 个字符。帮我解决一些问题。

Answer 1

检查下面的例子，你需要阻止你的<Icon>正如我对“+ -”所做的那样

应该是这样的:

{
  dbConfigList.map(item => (
    <Option key={item}>
      {item}
      {selectedValue !== item // you need to add state 
      <Icon
        onClick={this.editFun.bind(this)}
        type="edit"
        style={{ fontSize: "20px", color: "green" }}
        theme="outlined"
      />
      <Icon
        onClick={this.deleteFun.bind(this)}
        type="delete"
        style={{ fontSize: "20px", color: "#CC160B" }}
        theme="outlined"
      /> : null}
    </Option>
  ));
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      optionsdata : [
         {key:'101',value:'Lion'},
         {key:'102',value:'Giraffe'},
         {key:'103',value:'Zebra'},
         {key:'104',value:'Hippo'},
         {key:'105',value:'Penguin'}
       ],
      selectedValue: null // store selected value
    }
  }
  handleChange = (e) => {
    console.log(e.target.value);
    var value = this.state.optionsdata.filter(function(item) {
      return item.key == e.target.value
    })
    this.setState({ selectedValue: value[0].value }); // set state
    console.log(value[0].value);
  }
  render() {
    const { selectedValue } = this.state;
    return (
      <select onChange={this.handleChange}>
        {this.state.optionsdata.map(function(data, key) {  return (
          <option key={key} value={data.key}>{data.value} {selectedValue !== data.value ? '+ -' : null } </option> )
        })}
      </select>
    )
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div id="app"></div>