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

#javascript #reactjs #semantic-ui

Вопрос:

У меня есть выпадающий список с 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
  />
)

Как я могу сохранить выбранный параметр в моем состоянии?

1. how i can store the users option into the state вы хотите передать те же точные значения из options в listValue ? Дублирование массива?

2. Не совсем, желание состоит в том, чтобы установить значение параметра в ‘listValue’. Измените значение текущего состояния.

3. Используйте setState()

4. Вы просто хотите сохранить один параметр в listValue ?

Ответ №1:

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

Пример

 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}</pre>
          </Segment>
        </Grid.Column>
      </Grid>
    );
  }
}

1. Есть ли способ обновить дополнительные ключи для состояния handleChange . В моем последнем сообщении я изо всех сил пытаюсь обновить key другое, чем value указать, когда сделан выбор

Ответ №2:

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

 onChange(selectedValue) {

  this.setState({listValue: selectedValue});

}

Ответ №3:

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

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

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

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

Ответ №4:

Управление состоянием обрабатывается с помощью 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