通过输入存储在redux中的值并使其可编辑

Question

我有一个输入，该输入中预存了state.model.operationLength中存储的redux中其他位置的值，该值作为this.props.operationLength.value传递给输入，然后用户看到下面的输入中已有一个值输入，但是该值不可编辑，如果我尝试更改它，它将触发redux中的操作，但不会更改该值，

如果state.model.operationLength中没有值，则输入是可编辑的，并将存储键入的值

如果已经存储了值，如何使它可编辑？

component.js

<TextBox
  type="number"
  defaultValue={ this.props.height / 100 * 66 }
  placeholder={this.props.height / 100 * 66}
  onChange={newValue => this.props.setOperationLength(newValue)}
  tooltip="invalid"
  value={this.props.operationLength.value || ''}
  isValid={this.props.setOperationLengthValid}
  state={this.props.operationLength.isValid}
/>

textbox.js

class TextBox extends React.Component {
  onChange = event => {
    const value = event.target.value;
    value >= this.props.placeholder && value <= 3000
      ? this.props.isValid(true)
      : this.props.isValid(false);
    this.props.onChange(value);
  };

  render() {
    return (
      <Box invalid={!this.props.isValid}>
        <Label
          rollo={this.props.designation === "rollo"}
          pleating={this.props.designation === "pleating"}
        >
          {this.props.label}
        </Label>
        <span>
          <Input
            type={this.props.type && this.props.type}
            onChange={this.onChange}
            placeholder={this.props.placeholder}
            value={this.props.value || ""}
          />
          mm
          <Tooltip>
            {this.props.state === false &&
              this.props.value !== null &&
              this.props.value <= 3000 &&
              "number entereded is too low"}
            {this.props.state === false &&
              this.props.value !== null &&
              this.props.value >= this.props.placeholder &&
              "number entereded is too high"}
            enter a number between ({this.props.placeholder} and 3000)
          </Tooltip>
        </span>
      </Box>
    );
  }
}

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