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