输入字段无法在reactjs中通过传递值的方式进行编辑

Question

我在Textbox中有一个输入组件，该组件在其他地方设置了一个值，然后传递给它，并且当用户键入输入内容时应该可以编辑，但是如果我使用value={this.props.value || ''}，则输入是不可编辑的，如果我使用defaultValue={this.props.value || ''}，它将更新组件，但不会更新Redux状态。

我看到它会触发SET_OPERATION_LENGTH并使用输入的正确值进行更新，但随后会再次触发SET_OPERATION_LENGTH并返回其原始设置值

如何使用户可编辑输入？

SettingDropOperation.js

class SettingDropOperation extends React.Component {
  handleOperationLength = (event) => {
    this.props.setOperationLength(event.target.value);
  }

  render() {
    return (
      <TextBox
        type="number"
        onChange={event =>this.handleOperationLength(event)}
        value={this.props.operationLength.value || ''}
      />    
    );
  }
};

const mapStateToProps = (state) => {
  return {
    operationLength: {
      value: state.model.operationLength.value,
      isValid: state.model.operationLength.isValid
    },
  };
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    ...settingDropActions,
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SettingDropOperation);

textbox.js

class TextBox extends React.Component {

  render() {
    return (

          <Input
            type={this.props.type && this.props.type}
            onChange={this.onChange}
            placeholder={this.props.placeholder}
            value={this.props.value || ""}
          />

export default TextBox;

actions.js

export function setOperationLength(operationLength) {
  return {
    type: SET_OPERATION_LENGTH,
    operationLength
  }
}

reducer.js

import {
  SET_OPERATION_LENGTH, SET_OPERATION_LENGTH_VALID, SET_OPERATION_PRISTINE
} from '../../constants/actionTypes.js';

const operationLengthReducer = (state = {
  isValid: false,
  pristine: true,
  value: 0
}, action) => {
  switch (action.type) {
    case SET_OPERATION_LENGTH:
      return {
        ...state,
        value: action.operationLength
      };
    case SET_OPERATION_LENGTH_VALID:
      return {
        ...state,
        isValid: action.isValid
      };
    case SET_OPERATION_PRISTINE:
      return {
        ...state,
        pristine: action.pristine
      };
    default:
      return state;
  }
}

export default operationLengthReducer