javascript - React on select change option value of display - Stack Overflow

admin管理员组

文章数量:1320888

I am using antd library as part of react application. For select option values are fetched from api and rendered in this format.

<Select
  {...propsForSelect}
> 
  {this.props.data.map(e => 
     <Option
        key={e.key || e}
        value={e.value || e}
        title={e.title}
      >
        {`${e.key} | ${e.value}`}  
      /Option>
    )}
</Select>

Once user selects an option I want to display only the value and not {${e.key} | ${e.value}} value. {${e.key} | ${e.value}} is displaying in dropdown and when user selects an option need to show e.value alone.

CodeSandbox:

I am using antd library as part of react application. For select option values are fetched from api and rendered in this format.

<Select
  {...propsForSelect}
> 
  {this.props.data.map(e => 
     <Option
        key={e.key || e}
        value={e.value || e}
        title={e.title}
      >
        {`${e.key} | ${e.value}`}  
      /Option>
    )}
</Select>

Once user selects an option I want to display only the value and not {${e.key} | ${e.value}} value. {${e.key} | ${e.value}} is displaying in dropdown and when user selects an option need to show e.value alone.

CodeSandbox: https://codesandbox.io/s/tender-feynman-uhtn7

• javascript
• reactjs
• antd

Share Improve this question Follow edited Dec 18, 2019 at 3:35 Rinsen S asked Dec 18, 2019 at 3:21 Rinsen SRinsen S 47133 gold badges1111 silver badges2727 bronze badges 7

• can you share your plete code or in sandbox? – akhtarvahid Commented Dec 18, 2019 at 3:31
• Can you please share {...propsForSelect}? – Umair Sarfraz Commented Dec 18, 2019 at 3:35
• please find codesandbox here: codesandbox.io/s/tender-feynman-uhtn7, let me whether sandbox is working – Rinsen S Commented Dec 18, 2019 at 3:36
• @Umair, we can ignore propsForSelect – Rinsen S Commented Dec 18, 2019 at 3:40
• @RinsenS Do you also want to change all the values (to just e.value) in the dropdown options or just the selected value? – Umair Sarfraz Commented Dec 18, 2019 at 3:50

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

Is this what you are looking for?

https://codesandbox.io/s/headless-river-1n0e3

Basically I just added a selected property to each genre object, and then in the Select ponent's onSelect() prop, passed a callback function that updates state and toggles the respective genre's selected property to true.

Then, in the UI, I simply check if the selected property is true for each genre and then conditionally render only the display value in that case.

This is what the optionLabelProp is for.

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;


class App extends React.Component {
  state = {
    genres: [{"key": 1000, "value": "1", "display": "Action"},
    {"key": 1001, "value": "2", "display": "Adventure"},
    {"key": 1002, "value": "3", "display": "Comedy"}]
  };

  render() {
    return (
      <div className="container">
        <Select
          style={{width:"50%"}}
          optionLabelProp="value"
        >
        {this.state.genres.map(e => 
          <Option
            key={e.key}
            value={e.value}
          >
            {`${e.display} | ${e.value}`}
          </Option> 
        )}

        </Select>

      </div>
    );
  }
}

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

class App extends React.Component {
  state = {
    genres: [
      { key: 1000, value: "1", display: "Action" },
      { key: 1001, value: "2", display: "Adventure" },
      { key: 1002, value: "3", display: "Comedy" }
    ],
    selected: '' // A default value can be used here e.g., first element in genres
  };

  handleChange = key => {
    this.setState({ selected: this.state.genres.find((object) => object.key === Number(key)).value });
  };

  render() {
    return (
      <div className="container">
        <Select value={this.state.selected} onChange={this.handleChange} style={{ width: "50%" }}>
          {this.state.genres.map(e => (
            <Option key={e.key}>
              {`${e.display} | ${e.value}`}
            </Option>
          ))}
        </Select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

本文标签： javascriptReact on select change option value of displayStack Overflow