时间戳

首页 > 解决方案 > 删除选择框reactJS中出现的编辑和删除按钮

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

问题描述

我是新手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每个选项的菜单中，我希望编辑和删除按钮出现在右上角。现在它出现在文本之后。我可以为此使用保证金。但每个名称大小都不同。前任。有些名称将是 6 个字符，有些名称将超过 6 个字符。帮我解决一些问题。

标签： javascripthtmlcssreactjs

解决方案

检查下面的示例，您需要<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>

推荐阅读