Question

我有一个使用带有输入字段的子组件的表单。我已经使用props从父组件获取数据，但是没有将prop值添加到输入字段。控制台中没有错误。

父组件：

const {
  address,
  errors
} = this.state;

return (
    <form noValidate autoComplete="off" onSubmit={this.onSubmit.bind(this)}>
     <LocationInputGroup
        errors={errors}
        address={address}
     />

     <Button
        type="submit"
        style={{ marginRight: 10, marginTop: 20 }}
        variant="callToAction"
    > Submit</Button>
    </form>
);

子组件：

constructor(props) {
  super(props);

  this.state = {
     address: "",
     errors: {}
  };
}

componentDidMount() {
        this.setState({
            errors: this.props.errors,
            address: this.props.address
        });
}

render() {
  const {
    address,
    errors
  } = this.state;
  return (
    <div>
      <InputGroup
        value={address}
        error={errors.address}
        label="Address"
        name={"address"}
        onChange={e => this.setState({ address: e.target.value })}
        placeholder={"Address"}
      />
    </div>
  );
}

InputGroup组件：

class InputGroup extends Component {
    constructor(props) {
        super(props);
    }

    //TODO check if scrolling still changes with number inputs
    //Bug was in Chrome 73 https://www.chromestatus.com/features/6662647093133312
    //If it's no longer a bug these listeners can be removed and the component changed back to a stateless component
    handleWheel = e => e.preventDefault();

    componentDidMount() {
        if (this.props.type === "number") {
            ReactDOM.findDOMNode(this).addEventListener("wheel", this.handleWheel);
        }
    }

    componentWillUnmount() {
        if (this.props.type === "number") {
            ReactDOM.findDOMNode(this).removeEventListener("wheel", this.handleWheel);
        }
    }

    render() {
        const {
            disabled,
            classes,
            error,
            value,
            name,
            label,
            placeholder,
            type,
            isSearch,
            onChange,
            onBlur,
            onFocus,
            multiline,
            autoFocus,
            InputProps = {},
            autoComplete,
            allowNegative,
            labelProps
        } = this.props;

        if (type === "phone") {
            InputProps.inputComponent = PhoneNumberInputMask;
        }

        let onChangeEvent = onChange;
        //Stop them from entering negative numbers unless they explicitly allow them
        if (type === "number" && !allowNegative) {
            onChangeEvent = e => {
                const numberString = e.target.value;
                if (!isNaN(numberString) && Number(numberString) >= 0) {
                    onChange(e);
                }
            };
        }

        return (
            <FormControl
                className={classes.formControl}
                error
                aria-describedby={`%${name}-error-text`}
            >
                <FormatInputLabel {...labelProps}>{label}</FormatInputLabel>
                <TextField
                    error={!!error}
                    id={name}
                    type={type}
                    value={value}
                    onChange={onChangeEvent}
                    margin="normal"
                    onBlur={onBlur}
                    onFocus={onFocus}
                    InputProps={{
                        ...InputProps,
                        classes: {
                            input: classnames({
                                [classes.input]: true,
                                [classes.searchInput]: isSearch
                            })
                        }
                    }}
                    placeholder={placeholder}
                    multiline={multiline}
                    autoFocus={autoFocus}
                    disabled={disabled}
                    autoComplete={autoComplete}
                    onWheel={e => e.preventDefault()}
                />

                <FormHelperText
                    className={classes.errorHelperText}
                    id={`${name}-error-text`}
                >
                    {error}
                </FormHelperText>
            </FormControl>
        );
    }
}

InputGroup.defaultProps = {
    value: "",
    type: "text",
    labelProps: {}
};

InputGroup.propTypes = {
    error: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    name: PropTypes.string.isRequired,
    label: PropTypes.string,
    placeholder: PropTypes.string,
    type: PropTypes.string,
    isSearch: PropTypes.bool,
    onChange: PropTypes.func.isRequired,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    multiline: PropTypes.bool,
    autoFocus: PropTypes.bool,
    InputProps: PropTypes.object,
    disabled: PropTypes.bool,
    autoComplete: PropTypes.string,
    allowNegative: PropTypes.bool,
    labelProps: PropTypes.object
};

export default withStyles(styles)(InputGroup);

我希望有人可以提出问题所在以及如何解决这个问题。

Answer 1

通常，当我们从父级传递数据时，我们认为它是不可修改的， （即） 不应直接从子组件中更改 。

因此， 直接从父级使用prop值 ，然后使用 方法从父级进行变异或更改< / em> 。

下面的代码不言自明。

父母

scheduler.shutdown(); scheduler.initialize(); loadCrons();

孩子

class Parent { // parent immutable state public parentObject: object = { location: "", phoneNo: "" }; constructor() { this.state = { parentObject: this.parentObject } } public onParentObjectChangeCallBack(key: string, value: string | number) { this.state.parentObject[key] = value; // to rerender this.setState(); } public render () { return <ChildComponent parentObject={this.state.parentObject} onChange={this.onParentObjectChangeCallBack} /> } }

反应子组件不获取道具和更新状态

1 个答案: