Question

我对JS和材料UI都反应还很陌生，并且正在一个小项目上工作，要求显示材料UI表单，该表单具有动态添加的包含下拉列表和文本字段的行。我已经能够到达一个动态字段包含两个文本框的位置，并且在提交时我得到了按行号索引的JSOn的单个行数据。

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

我尝试用react material Select组件以及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.

任何建议对于解决方案来说可能是一个好的方法，将非常有帮助。如果需要更多详细信息，很乐意提供。

如何在带有下拉菜单的React Material UI表单中显示动态行

0 个答案: