Как отображать динамические строки в форме пользовательского интерфейса React Material с выпадающими списками - PullRequest
Новая
       24

Как отображать динамические строки в форме пользовательского интерфейса React Material с выпадающими списками

1 голос
/ 08 апреля 2019

Я довольно новичок, чтобы реагировать как на JS, так и на пользовательский интерфейс материала, и работаю над небольшим проектом с требованием отобразить форму пользовательского интерфейса с динамически добавленными строками, содержащими выпадающий список и текстовое поле. Я уже смог достичь положения, когда динамические поля содержат два текстовых поля, и при отправке я получаю данные отдельных строк в виде JSOn, проиндексированных по номеру строки.

Теперь я хочу, чтобы форма также имела поле выбора, чтобы можно было захватывать данные строк в выходном JSON при нажатии кнопки submit.

Я попытался заменить текстовое поле компонентом «Реактивный материал», а также компонентом «Автозаполнение», но почему-то не могу заставить их работать как с точки зрения рендеринга, так что я даже не уверен, как собирать данные.

Также в качестве краткого примечания, это ступенчатая форма ...

Существующий рабочий код с текстовыми полями, которые можно динамически добавлять или удалять: 

<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.

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

...