Hidden Input/Textarea value onChange setState in React - without user typing inputs

Question

I need to trigger a function when the value of Hidden input/textArea/TextField changing in React. Not when the user enter values. When dynamically changing the hidden input value trigger a function.

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}
      />
    );
  }
}

By changing the input value `value={this.state.salary !== 0 ? this.state.salary : salary}` :) — Vidumini Kulathunga, Aug 05 '20 at 15:23
Then, why you need a onchange for the input? Might be better to watch for changes on `this.state.salary` instead. — n9iels, Aug 05 '20 at 15:35

95faf8e76605e973 · Accepted Answer · 2020-09-06T04:17:45.443

onChange will not trigger here because it will only fire when the user changes the value of the input field (e.g., user types in a new character).

Based on the logic of your app, It looks like the value of TextField will only be controlled by the prop as long as the RowComponent salary state is not equal to 0 (based off of this condition on your TextField: value={this.state.salary !== 0 ? this.state.salary : salary}) - and this is evident and is much more clear when you browse the state/props with React Dev Tools.

So, what you can do is compare the previous props & state with the current ones & assess whether or not to update the state 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);
      }
    );
  }
}

Hidden Input/Textarea value onChange setState in React - without user typing inputs

1 Answers1