reactjs - 使用动态选项进行选择

Question

我正在尝试使用处于某种状态的选项创建动态选择。

我尝试了两件事:

• 我尝试使用无状态函数创建自定义选择器。我将包含可以用选项填充选择的数据的 prop 传递给函数。像这样的事情:

const renderFieldSelect = ({ name, label, templateList})  => {
	if(templateList && templateList.entities) {
		return (
			<div>
				<div className="col-md-4" >
					<label>{label}</label>
				</div>
				<div className="col-md-4">
					<Field
						className="form-control"
						name={name}
						component="select"
                    >
						{
							templateList.result.map((type, index) => 
								return <option value={templateList.entities.template[type].id}>{templateList.entities.template[type].name}</option>
							)
						}
					</Field>
				</div>
			</div>
		)
	}else {
		return <div></div>
}

//... more stuff

class Bla extends Component {
  
  //... more stuff
    render(){
        return (
            <div>
                <Field
                    component={renderFieldSelect}
                    name='templateList'
                    label='label'
                    templateList={this.props.templateList}
                />
                <Field
                    component="input"
                    name='addNewOption'
                    type='text'
                />
                <button onClick={addOption}>Add new option</button>
            </div>
        )
    }
}

但是当我更新 templateList (使用输入和按钮)时，该对象不会使用新的重新渲染选项(我觉得很奇怪)。我知道 addOption 函数正在工作，因为它通过其 reducer 传递

• 我尝试创建与 FieldArray 类似的东西，但我不知道如何更新 fields 参数。文档不太清楚这个 Prop 有什么/可能有什么。另外，我也不知道您是否可以创建一个“字段”并仅返回或类似的内容。

Answer 1

根据您提供的信息，很难查明您的问题。

例如，您没有提供reducer或addOption函数。

无论如何，我确实编写了一个快速示例来演示这部分代码应该工作。我无法谈论 redux 部分，因为您没有提供这些内容，而且我今天也不会编写这些内容。

也许这至少会为您提供一些证据，表明问题出在代码的其他区域。

import React, {Component} from 'react'
import {Field, reduxForm, formValueSelector} from 'redux-form'
import {connect} from 'react-redux'

const renderFieldSelect = ({ name, label, templateList }) => {
  if (templateList && templateList.entities) {
    return (
      <div>
        <div className="col-md-4">
          <label>{label}</label>
        </div>
        <div className="col-md-4">
          <Field
            className="form-control"
            name={name}
            component="select">
            {
              templateList.result.map((type, index) => {
                return (<option value={templateList.entities.template[ type ].id}>{templateList.entities.template[ type ].name}</option>)
              })
            }
          </Field>
        </div>
      </div>
    )
  } else {
    return <div></div>
  }

}

class Bla extends Component {

  constructor(props) {
    super(props)
    this.state = {}
    this.state.templateList = {}
    this.state.templateList.result = ['type1', 'type2']
    this.state.templateList.entities = {}
    this.state.templateList.entities.template = {
      type1: {id: 1, name: 'Type 1'},
      type2: {id: 2, name: 'Type 2'}
    }
  }

  render () {
    return (
      <div>
        <Field
          component={renderFieldSelect}
          name='templateList'
          label='label'
          templateList={this.state.templateList}
        />
        <Field
          component="input"
          name='addNewOption'
          type='text'
        />
        <button onClick={this.addOption.bind(this)}>Add new option</button>
      </div>
    )
  }

  addOption() {
    let type = {id: this.props.addNewOption, name: this.props.addNewOption}
    this.setState({
      ...this.state,
      templateList: {
        result: [...this.state.templateList.result, type.id],
        entities: {...this.state.templateList.entities, template: {...this.state.templateList.entities.template, [type.id]: type}}
      }
    })
  }
}

let bla = reduxForm({
  form: Bla.name
})(Bla)

const selector = formValueSelector(Bla.name)

bla = connect(
  state => ({
    addNewOption: selector(state, 'addNewOption')
  })
)(bla)

export default bla