Как я могу сохранить выбранный вариант раскрывающегося семантического пользовательского интерфейса в состоянии? - PullRequest
Новая
       6

Как я могу сохранить выбранный вариант раскрывающегося семантического пользовательского интерфейса в состоянии?

1 голос
/ 11 апреля 2019

У меня есть выпадающий список с 5 вариантами. Мне нужно сохранить выбранную опцию в моем состоянии как listValue.

Мой список опций и состояния 

const options = [
  { key: 1, text: 'OK', value: 1 },
  { key: 2, text: 'Avvikelse', value: 2 },
  { key: 3, text: 'Ej Relevant', value: 3 },
  { key: 4, text: 'Observation', value: 4 },
  { key: 5, text: 'Saknas', value: 5 },
]
export default class ConfirmationModal extends React.Component {
  state = {
  listValue: 'Status'
}

Мой список (из semantic-ui) 

dropDownList = () => (
  <Dropdown
    placeholder={this.state.listValue}
    clearable
    options={options}
    selection
  />
)

Как сохранить выбранную опцию в моем штате?

Ответы [ 4 ]

1 голос
/ 11 апреля 2019

Как я понял, вам нужно сохранить в состоянии значения, которые выбрал пользователь? Если да, вам нужно иметь событие, например, onChange, что означает, что пользователь выбирает эту конкретную опцию из списка. и установите его в состояние 

onChange(selectedValue) {

  this.setState({listValue: selectedValue});

}
1 голос
/ 11 апреля 2019

Вы можете добавить обработчик onChange и поместить value, заданный обработчику, в состояние вашего компонента.

Пример 

<code>const options = [
  { key: 1, text: "OK", value: 1 },
  { key: 2, text: "Avvikelse", value: 2 },
  { key: 3, text: "Ej Relevant", value: 3 },
  { key: 4, text: "Observation", value: 4 },
  { key: 5, text: "Saknas", value: 5 }
];

class DropdownExampleControlled extends React.Component {
  state = {
    options,
    value: options[0].value
  };

  handleChange = (_e, { value }) => this.setState({ value });

  render() {
    const { value, options } = this.state;
    const currentOption = options.find(o => o.value === value);

    return (
      <Grid columns={2}>
        <Grid.Column>
          <Dropdown
            onChange={this.handleChange}
            options={options}
            placeholder="Choose an option"
            selection
            value={value}
          />
        </Grid.Column>
        <Grid.Column>
          <Segment secondary>
            <pre>Current value: {currentOption.text}
);}}
0 голосов
/ 11 апреля 2019

Управление состоянием с использованием setState.Простой пример:

Пример Песочница 

const options = [
      { key: 1, text: 'OK', value: 1 },
      { key: 2, text: 'Avvikelse', value: 2 },
      { key: 3, text: 'Ej Relevant', value: 3 },
      { key: 4, text: 'Observation', value: 4 },
      { key: 5, text: 'Saknas', value: 5 },
    ]

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      listValue: ''
    }
  }

  componentWillMount() //before render
  {
    this.setState({
      listValue: options[1].text  //storing text from second line
    })
  }

  render() {
    return (
      <div>
        {this.state.listValue}
      </div>
      );
    }
  }

Отображается: Avvikelse

0 голосов
/ 11 апреля 2019

добавьте эту функцию к вашему компоненту: 

handleChange = (_p, { value }) => {
  this.setState({ listValue: value});
};

добавьте его в свой выпадающий список: 

<Dropdown onChange={this.handleChange} placeholder={this.state.listValue} clearable options={options} selection />
...