Невозможно обновить родительский реквизит в реакции - PullRequest
Новая
       17

Невозможно обновить родительский реквизит в реакции

1 голос
/ 19 июня 2019

Я могу вставить входное значение, скажем, «1,2,3», и когда backspace удаляет все, но в консоли «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;

Ожидаемый результат должен состоять в том, что после очистки значения, скажем, с помощью backspace и посещения страницы в следующий раз, поле ввода должно быть пустым и не должно показывать старое значение.

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Проверьте этот CodeSandbox, я скопировал ваш код, и если я правильно понял проблему, то исправил ее https://reactjs.org/docs/cross-origin-errors.html

0 голосов
/ 21 июня 2019 
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} />
      );
}
...