Значение скрытого ввода / текстового поля onChange setState в React - без ввода пользователем ввода

Question

Мне нужно вызвать функцию , когда значение Скрытый ввод / textArea / TextField изменяется в React . Не когда пользователь вводит значения. При динамическом изменении скрытого входного значения запускается функция.

import TextField from "@material-ui/core/TextField";

class RowComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      xx: "",
      salary: 0,
    };
  }

  handleChange = (event) => {
    this.setState({
      xx: event.target.value,
    });
  };

  render() {
    const {
      member: { salary },
    } = this.props;

    console.log(this.state.xx);

    return (
      <TextField
        name="HiddenField"
        type="hidden"
        value={this.state.salary !== 0 ? this.state.salary : salary}
        onChange={this.handleChange}
      />
    );
  }
}

Answer 1

onChange здесь не сработает, потому что он сработает только тогда, когда пользователь изменяет значение поля ввода (например, пользователь вводит новый символ).

На основе logi c of ваше приложение, похоже, что value из TextField будет только будет контролироваться опорой, пока состояние зарплаты RowComponent не равно 0 (на основе этого условия на ваш TextField: value={this.state.salary !== 0 ? this.state.salary : salary}) - и это очевидно и становится намного понятнее, когда вы просматриваете состояние / реквизиты с помощью React Dev Tools.

Итак, что вы можете сделать, это сравнить предыдущие реквизиты и состояние с текущими и оценить, обновлять ли состояние xx

componentDidUpdate(prevProps, prevState) {
  if (prevProps.member.salary !== this.props.member.salary) {
    if (this.state.salary === 0) {
      this.setState(
        {
          xx: this.props.member.salary
        },
        () => {
          console.log("new xx", this.state.xx);
        }
      );
    }
  }

  if (prevState.salary !== this.state.salary) {
    this.setState(
      {
        xx: this.state.salary
      },
      () => {
        console.log("new xx", this.state.xx);
      }
    );
  }
}

Изменить ароматный-солнце-eivqq