Реагировать - раскрытие семантического пользовательского интерфейса с объектом - PullRequest
Новая
       14

Реагировать - раскрытие семантического пользовательского интерфейса с объектом

0 голосов
/ 15 марта 2019

Я сопоставляю массив объектов и использую имя в выпадающем списке w / semantic-ui-реаги * .

У меня есть некоторые ложные данные 

mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    }
  ]
});

в cDM я обновляю состояние объекта как dataschemas

  async componentDidMount() {
    await this.getSchemas();
  }

  getSchemas = async () => {
    try {
      const { data } = await axios.get("/dataschemas");
      console.log(data);
      const dataschemas = data.data;

      this.setState({ dataschemas: dataschemas });

      console.log("This is the dataschema list:", dataschemas);
    } catch (error) {
      console.error(Error(`Error fetching results list: ${error.message}`));
    }
  };

Моя функция обработчика изменений выглядит следующим образом: 

handleSchemaChange = (e, { value }) => this.setState({ name: value });

Затем в рендере я использую <Dropdown> компонент 

render() {
    const { dataschemas } = this.state;
    return (
      <div>
        <div>
          <label>Select a dataschema: </label>
          <Dropdown
            placeholder="Select data schema"
            clearable
            fluid
            selection
            multiple={true}
            options={dataschemas}
            header="PLEASE SELECT A DATASCHEMA"
            value={dataschemas.filter(({ name }) => name === this.state.name)}
            onChange={this.handleSchemaChange}
          />
        </div>
      </div>
    );
  }

Я не могу получить dataschema names для отображения в раскрывающемся списке или получить метку для обновления после выбора. Я не знаю, пропустил ли я проп или не обновляю состояние правильно, есть идеи?

Codesandbox здесь

1 Ответ

2 голосов
/ 15 марта 2019

Как указано в https://react.semantic -ui.com / modules / dropdown / , вы должны использовать следующую структуру для отображения объекта внутри раскрывающегося списка. 

{
  "key": "",
  "text": "",
  "value": ""
}

Пример: использованиеэто значение параметра в вашем раскрывающемся списке 

options={dataschemas.map(ds => {
              return {
                  key: ds.id,
                  text: ds.name,
                  value: ds.selfUri
              }
            })}
...