JSON Material UI Выбрать DropDown - PullRequest
Новая
       9

JSON Material UI Выбрать DropDown

0 голосов
/ 15 мая 2018

Я не могу получить пользовательский интерфейс материала. Заполните его данными JSON.Может кто-то видит, что я делаю не так?Вот код с JSON и сам код. 

`
const json = {   ResponseMetadata: {
RequestId: "1B29B45E145594A7",
HostId:
  "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=",
HTTPStatusCode: 200,
HTTPHeaders: {
  "x-amz-id-2":
    "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=",
  "x-amz-request-id": "1B29B45E145594A7",
  date: "Sun, 13 May 2018 20:36:02 GMT",
  "content-type": "application/xml",
  "transfer-encoding": "chunked",
  server: "AmazonS3"
},
RetryAttempts: 0   },   Buckets: [
{
  Name: "eladft-1-653237860766",
  CreationDate: "2014-09-01T16:58:41Z"
},
{
  Name: "elasticdf37860766",
  CreationDate: "2015-10-06T00:24:57Z"
},
{
  Name: "elasticdf0766",
  CreationDate: "2015-10-02T17:37:19Z"
}   ],   Owner: {
DisplayName: "dfdf",
ID: "b4bf8bde7571756284e067071dfe442c7b014a09f012a1179"   }   };
`

 <form className={classes.root} autoComplete="off">
    <FormControl className={classes.formControl}>
      <InputLabel htmlFor="bucketName-simple">Buckets</InputLabel>
      <Select
        native="true"
        value={this.state.json.Buckets.Name}
        onChange={this.handleChange}
        inputProps={{
          name: "v_bucketName",
          id: "age-simple"
        }}
      >
        {this.state.json.Buckets.map((Buckets, i) => (
          <MenuItem native="true" key={i} value={Buckets.Name}>
            {Buckets.Name}
          </MenuItem>
        ))}
        )} 
      </Select>
    </FormControl>
  </form>
);
 }
}

Данные из AWS S3.Но для этого используется Material-UI и React JS

Код Sanbox

1 Ответ

0 голосов
/ 15 мая 2018

Вы используете native=true. Это означает, что вы не можете использовать компонент MenuItem. Вместо этого используйте <option>.

См. https://material -ui-next.com / demos / selects / # native-select .

...