reactjs - 如何使用下拉菜单在 React Material UI 表单中显示动态行

Question

我对 JS 和 Material UI 都做出了反应，并且在一个小项目上工作，需要显示一个 Material UI 表单，该表单具有动态添加的包含下拉列表和文本字段的行。我已经能够到达动态字段包含两个文本框的位置，并且在提交时，我获得了单独的行数据，因为 JSOn 由行号索引。

现在我希望表单也有一个选择字段，以便在按下提交时我可以在输出 JSON 中捕获行数据。

我尝试用反应材料选择组件以及 AutoSuggest 替换文本字段，但不知何故无法使它们在渲染方面都工作，然后我什至不知道如何捕获数据。

另外作为一个快速说明，它是一个步进形式......

具有可动态添加或删除的文本字段的现有工作代码：

<MaterialUIForm activeStep={activeStep} onFieldValidation={this.updateErrorSteps} onSubmit={this.submit}>
          {activeStep === 0 &&
            <React.Fragment>
            <h6 style={{padding:"2px", textAlign:"left"}}>Name Information</h6>
              <div style={{width:"100%", align:"right"}}>
              <Button variant="contained" onClick={this.clickNext}>Next</Button>
              </div>
            </React.Fragment>
          }

          {activeStep === 1 &&
            <React.Fragment>
            <h6 style={{padding:"2px", textAlign:"left"}}>Attribs</h6>
              {this.state.rows.map((row, i) => (
                <Fragment key={row._id}>
                  <TextField label="Label" name={`rows[${i}][label]`} value="" className={classes.sanKeyTF} />
                  <TextField label="Value" name={`rows[${i}][value]`} value="" className={classes.sanValueTF} />
                  { this.state.rows.length > 1 &&
                    <Button variant="contained" onClick={()=> this.removeRow(i)}
                    deletefieldrow={`rows[${i}]`}>Remove</Button>
                  }
                </Fragment>
              ))}
              <div style={{width:"100%", textAlign:"left"}}>
                <Button variant="contained" onClick={this.addRow}>Add Attrib</Button>
              </div>
              <div style={{width:"100%", textAlign:"right"}}>
                <Button variant="contained" onClick={this.clickBack}>Back</Button>
                &nbsp;
                <Button variant="contained" type="submit">Submit</Button>
              </div>
            </React.Fragment>
          }
</MaterialUIForm>

state = {
    rows: [{ _id: _.uniqueId() }],
    activeStep: 0,
    errorSteps: [],
  }

  addRow = () => {
    const { rows } = this.state
    rows.push({ _id: _.uniqueId() })
    this.setState({ rows })
  }

  removeRow = (index) => {
    const { rows } = this.state
    if (rows.length > 1) {
      rows.splice(index, 1)
      this.setState({ rows })
    }
  }

submit = (values, pristineValues) => {
    // get all values and pristineValues on form submission
    const parsedValues = formData.toObj(values)
    console.log(parsedValues);
  }

我正在尝试添加的自动建议代码

<Autosuggest
                    {...autosuggestProps}
                    inputProps={{
                      classes,
                      placeholder: 'Search a country (start with a)',
                      value: this.state.single,
                      onChange: this.handleChange('single'),
                    }}
                    theme={{
                      container: classes.container,
                      suggestionsContainerOpen: classes.suggestionsContainerOpen,
                      suggestionsList: classes.suggestionsList,
                      suggestion: classes.suggestion,
                    }}
                    renderSuggestionsContainer={options => (
                      <Paper {...options.containerProps} square>
                        {options.children}
                      </Paper>
                    )}
                  />

获取错误和上面共享的代码：

./src/components/CreateCertificate.js
  Line 158:  'Autosuggest' is not defined       react/jsx-no-undef
  Line 159:  'autosuggestProps' is not defined  no-undef

Search for the keywords to learn more about each error.

任何可能是该解决方案的好方法的建议都将非常有帮助。如果需要任何进一步的细节，很乐意提供。

标签： reactjsmaterial-uireact-material