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

【问题标题】：Hidden Input/Textarea value onChange setState in React - without user typing inputsReact 中的隐藏输入/文本区域值 onChange setState - 无需用户输入输入
【发布时间】：2020-08-05 15:15:01
【问题描述】：

当隐藏输入/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}
      />
    );
  }
}

【问题讨论】：

隐藏输入是如何变化的？
通过更改输入值value={this.state.salary !== 0 ? this.state.salary : salary} :)
那么，为什么你需要一个 onchange 输入？可能会更好地关注 this.state.salary 上的变化。

标签： javascript reactjs material-ui react-lifecycle

【解决方案1】：

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

根据您的应用程序的逻辑，只要RowComponent 工资状态不等于@ 987654327@（基于你的TextField：value={this.state.salary !== 0 ? this.state.salary : salary}） - 当你使用 React 开发工具浏览状态/道具时，这一点很明显并且更加清晰。

所以，你可以做的是将之前的 props & 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);
      }
    );
  }
}

【讨论】：