React 中的隐藏输入/文本区域值 onChange setState - 无需用户输入输入

Question

当React中Hidden input /textArea/TextField 的值发生变化时，我需要触发 function 。 不是当用户输入值时。 当动态改变隐藏输入值时触发 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}
      />
    );
  }
}

Answer 1

onChange不会在此处触发，因为它只会在用户更改输入字段的值时触发（例如，用户键入新字符）。

根据您的应用程序的逻辑，只要RowComponent薪水 state 不等于0 ，看起来TextField的value将仅由道具控制（基于您的TextField上的此条件： value={this.state.salary?== 0. this.state:salary : salary} ) - 当您使用 React 开发工具浏览状态/道具时，这一点很明显并且更加清晰。

因此，您可以做的是将之前的道具和 state 与当前道具进行比较，并评估是否更新 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);
      }
    );
  }
}