反应输入值不正确

Question

我有2个受控输入，这些输入将获取一个值并将其存储到redux中。

野生动物园从这些输入中获取不正确的值时遇到问题，它在chrome和firefox中工作正常。

例如，用户将在输入1中键入1，然后在输入2中键入2，我可以通过控制台日志看到输入1中的值正在更新为1，但是在输入2中显示为12，如果用户再次在输入1中键入3，则显示123

它也只会在第3次按键的输入字段中显示一个值，但会记录在第1次按键和第2次按键上键入的值

如何获取野生动物园存储正确的值？

DimensionBox.js

class DimensionBox extends React.Component {
  handleChange = (event) => {
    this.props.onChange(event.target.value);
  }

  render() {
      <input
      type="text"
      id={(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
        name={(this.props.label === 'Breite' && 'Breite' || this.props.label === 'Höhe' && 'Höhe' || undefined)}
      onChange={this.handleChange}
      />
    );
  }
};

export default DimensionBox;

SettingDropDimensions.js

class SettingDropDimensions extends React.Component {

  onDimensionValueChange(position, index, value) {

    this.props.setDimension(position, index, value);
    console.log()
  }


  getDimension(position) {
    if (position === 'wing') return position;
    return (position === 'top' || position === 'bottom') ? 'width' : 'height';
  }
  getBoxLabel(position, counter) {

    if (position === 'wing') return 'FF* Höhe';

    let label = '';
    let totalCount = 0;

    if (this.getDimension(position) === 'height') {
      label += 'Höhe';
      totalCount = this.props.dimensions.dimensions.left.values.length + this.props.dimensions.dimensions.right.values.length;
    } else {
      label += 'Breite';
      totalCount = this.props.dimensions.dimensions.top.values.length + this.props.dimensions.dimensions.bottom.values.length;
    }

    if (totalCount > 1) {
      label += ` ${counter}`;
    }

    return label;

  }

  componentDidUpdate(prevProps) {
    if (this.props.manufacturer && prevProps.manufacturer !== this.props.manufacturer) {
      this.props.setDimensionType('')
      this.props.setDimensionSize('')
    }
    if (this.props.typeValue && prevProps.typeValue !== this.props.typeValue) {
      this.props.setDimensionSize('')
    }
  }

  render() {
        {console.log('dimensions',this.props.dimensions.dimensions)}
        {(this.props.windowShape && this.props.windowShape.id) !== 6 &&
          <DimensionsWrap>
            {Object.keys(this.props.dimensions.dimensions).map((position, pIndex) => {
              const dimension = this.getDimension(position);
                return (
                  <DimensionsCell key={pIndex}>
                      {this.props.dimensions.dimensions[position].values.map((value, index) => {
                        const counter = ++inputCounter[dimension];
                        return (

                          <DimensionBox
                            key={index}
                            designation={this.props.designation.alias}
                            label={this.getBoxLabel(position, counter)}
                            // value={value}
                            minWidth={this.props.minWidth && this.props.minWidth.value * 10}
                            maxWidth={this.props.maxWidth && this.props.maxWidth.value * 10}
                            minHeight={this.props.minHeight && this.props.minHeight.value * 10}
                            maxHeight={this.props.maxHeight && this.props.maxHeight.value * 10}
                            minHeight2={this.props.minHeight2 && this.props.minHeight2.value * 10}
                            maxHeight2={this.props.maxHeight2 && this.props.maxHeight2.value * 10}
                            minWidth2={this.props.minWidth2 && this.props.minWidth2.value * 10}
                            maxWidth2={this.props.maxWidth2 && this.props.maxWidth2.value * 10}
                            minWidthSmallTop={this.props.minWidthSmallTop && this.props.minWidthSmallTop.value * 10}
                            maxWidthSmallTop={this.props.maxWidthSmallTop && this.props.maxWidthSmallTop.value * 10}
                            onChange={newValue => this.onDimensionValueChange(position, index, newValue)}
                            isValid={this.props.dimensions.valid[dimension]}
                            tooltip={
                              (this.props.dimensions.messages[dimension] && this.props.dimensions.dimensions[position].values.length) > 0 &&
                                <div style={{ margin: '0 0 0 10px' }}>{this.props.dimensions.messages[dimension]}</div>
                            }
                          />
                        )
                      })}

                  </DimensionsCell>
                )
            })}
          </DimensionsWrap>
        }


      </SettingDrop>
    );
  }
};

actions.js

export function setDimension(position, index, value, isValid) {
  return {
    type: SET_DIMENSION,
    position,
    index,
    value,
    isValid
  };
}

export function setDimensionValid(attribute, isValid) {
  return {
    type: SET_DIMENSION_VALID,
    attribute,
    isValid
  };
}

export function setDimensionMessage(attribute, message) {
  return {
    type: SET_DIMENSION_MESSAGE,
    attribute,
    message
  };
}

export function setDimensionValues(position, values) {
  return {
    type: SET_DIMENSION_VALUES,
    position,
    values
  };
}

reducer.js

const dimensionReducer = (state = {
  dimensions: {
    bottom: {
      values: []
    },
    top: {
      values: []
    },
    right: {
      values: []
    },
    left: {
      values: []
    },
    wing: {
      values: [0]
    }
  },
  valid: {
    angle: true,
    width: false,
    height: false,
    wing: true
  },
  messages: {
    width: '',
    height: '',
    wing: ''
  },
  dormer: {
    manufacturer: '',
    type: '',
    size: '',
  }
}, action) => {
  switch (action.type) {
    case SET_DIMENSION:
      const newState = {
        values: [...state.dimensions[action.position].values]
      };

      newState.values[action.index] = action.value;

      return {
        ...state,
        dimensions: {
          ...state.dimensions,
          [action.position]: newState
        }
      };
      break;
    case SET_DIMENSION_VALUES:
      let changedState = {...state.dimensions[action.position]};

      changedState.values = action.values;

      return {
        ...state,
        dimensions: {
          ...state.dimensions,
          [action.position]: changedState
        }
      };
    case SET_DIMENSION_VALID:
      return {
        ...state,
        valid: {
          ...state.valid,
          [action.attribute]: action.isValid
        }
      };
    case SET_DIMENSION_MESSAGE:
      return {
        ...state,
        messages: {
          ...state.messages,
          [action.attribute]: action.message
        }
      };
    case SET_DIMENSION_MANUFACTURER:
      return {
        ...state,
        dormer: {
          ...state.dormer,
          manufacturer: action.text
        }
      }
    case SET_DIMENSION_TYPE:
    return {
      ...state,
      dormer: {
        ...state.dormer,
        type: action.text
      }
    }
    case SET_DIMENSION_SIZE:
    return {
      ...state,
      dormer: {
        ...state.dormer,
        size: action.text
      }
    }
    default:
      return state;
  }
}

export default dimensionReducer;