Question

我可以插入输入值“ 1,2,3”，当退格时，它将删除控制台中的所有内容，但仍显示“ 1”，即House{props{house{property{rent:1}}}}

我在这里提供包含3个文件的代码。

(1) house.js

import ValInput from "main/components/val-input";

class House extends Component {
  state = {
    rent:"",
  };

componentDidMount() {

    if (this.props.house.rent) {
      const { rent} = this.props.house;
      this.setState({ rent });
    }
  }

onChange = (e) => {
    const rent = parseInt(e.target.value.replace(string);

    this.setState({
      rent,
    });
  };

render(){
const {house} = this.props;
const {rent} = this.state;
...
<ValInput
 type="text"
  value={ rent }
      onChange={e => {
          this.onChange(e);
       }}
   />
}

(2) val-input\index.js

    import React from "react";
    import Input from "main/components/input";

    const ValInput = props => (
      <Input
        {...props}
        type={props.type ? props.type : "text"}
      />
    );

    export default valInput;

(3) components/input/index.js

import React from "react";

const noOp = () => {};

const Input = ({
  onBlur = xP,
  ...otherProps
}) => (
  <input
    onBlur={e => {
      e.target.placeholder = placeholder;
      onBlur(e);
    }}
    {...otherProps}
  />
);

export default Input;

预期的结果应该是，在用退格键清空该值之后，下次访问该页面时，输入字段应该为空并且不应显示旧值。

Answer 1

检查此CodeSandbox，我复制了您的代码，如果我正确理解问题，则将其修复 https://reactjs.org/docs/cross-origin-errors.html

Answer 2

For updating @NaderZouaoui, has given me an example how to do Call back :
1. Child file :
onChange={e => {
          this.onChange(e);
        }}
onChange = e => {
    this.setState({
      rent
    });
    this.props.callback(rent);
  };
2. Parent file :
 state = {
    rent: ""
  };
  handleChangeRent = newRent => {
    this.setState({ rent: newRent });
  };
render(){
return(
<House house={{ rent }} callback={this.handleChangeRent} />
      );
}

无法在反应中更新父道具

2 个答案: