javascript - 向输入传递一个存储在 redux 中的值并使其可编辑

Question

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

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

如果已经存储了一个值，我怎样才能使它成为可编辑的值？

组件.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}
/>

文本框.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;

动作.js

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

减速器.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

标签： javascriptreactjsredux