Question

服务项（父项）上可以有不同数量的选择表（子项），在提交之前，我需要将所有选择项排列在一个数组中。默认情况下，我将第一个值设置为选择字段，但是如果它们改变了，我也会操纵父级的“ selectedValues”数组。

以下是一些数据：

  properties:
    - name: 'Format'
      values: ['GeoTIFF', 'JPEG']
    - name: 'Spatial reference system'
      values: ['EPSG:23700, HD72/EOV', 'EPSG:4326, WGS84']
    - name: 'Year'
      values: ['1990', '2000', '2006', '2012', '2018']

父代码：

import React from 'react'
import PropTypes from 'prop-types'
import useState from 'react';
import FlavorForm from '../FlavorForm'

class ServiceItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {selectedValues: [],};
    }  

    {this.props.item.properties.map((property, i) => (
        state.selectedValues.concat(property.values[0]);
        console.log(state.selectedValues);)},


    onValuePicked(selectedValue, selectIndex) {
        console.log(selectedValue + ' was selected.');
        selectedValues[selectIndex] = selectedValue
        this.setState({selectedValues:selectedValues})
    }

  render() {
    return (
        <div key={this.props.item.name} className='column' >
            {this.props.item.properties.map((property, i) => (<FlavorForm name={property.name} options={property.values} onChange={this.onValuePicked} selectIndex=i key={'property-' + i} />))}
        </div>
        );
      }
    }

子代码：

import React from 'react'
import useState from 'react';

class FlavorForm extends React.Component {

  handleChange = (event) => {
    onValuePicked(this.props.selectIndex, this.state.value);
  }


  render() {
    return (     
          <select value={this.state.selectedValues[this.props.selectIndex]} onChange={this.handleChange}>
            {this.props.options.map((x) => (<option value={x}>{x}</option>))}
          </select>
    );
  }
}

现在，父级在“ {this.props.item.properties.map（（property，i）””处出现错误。但是我想还有更多错误。

在父级别处理更多选择形式的选择

0 个答案: