React 中的隐藏 Input/Textarea 值 onChange setState - 无需用户输入

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不会在这里触发，因为它只会在用户更改输入字段的值时触发（例如，用户输入新字符）。

根据您应用的逻辑，TextField 的 value 似乎仅受道具控制，只要 RowComponent 工资状态不等于 0（基于你的 TextField 的这个条件：value={this.state.salary !== 0 ? this.state.salary : salary}） - 这很明显，当你浏览 state/props 使用 React 开发工具。

所以，你可以做的就是将以前的道具和状态与当前的道具和状态进行比较，并评估是否更新状态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);
      }
    );
  }
}

React 中的隐藏 Input/Textarea 值 onChange setState - 无需用户输入

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

javascript

reactjs

material-ui

react-lifecycle