Javascript 在ReactJs中动态更改字段

我正在开发一个项目，当在一个字段中键入值时，我需要根据这些值更改另一个字段​​我在一个函数中定义，下面是代码：

constructor(props) {
    super(props);
    this.state = {
        yieldMonth: '',
        risk: '',

    }


}

changeYieldMonthHandler= (event) => {
    this.setState({yieldMonth: event.target.value});
}

changeRiskHandler= (event) => {
    this.setState({risk: event.target.value});
}

在下面的函数中，我检查将插入到 应影响风险领域的月收入领域：

definesRisk（）{
if（this.state.yieldMonth！=null）{
如果（this.state.yieldMonth>6000）{
此.state.risk=“A”；
}否则，如果（this.state.yieldMonth>1000&&this.state.yieldMonth这里有一个大问题：

更新
state.this.state.risk='A'
的方法不正确，相反，应该像这样调用setState方法
this.setState（{risk:'A'}）

请注意，为了在状态更新时调用
definesRisk
methode，我使用了
componentDidUpate生命周期方法

下面是使用带有挂钩的react Functional组件的代码：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [yieldMonth, setYieldMonth] = useState("");
  const [risk, setRisk] = useState("jkkkj");

  const changeYieldMonthHandler = (event) => {
    setYieldMonth(event.target.value);
  };

  useEffect(() => {
    const definesRisk = () => {
      if (yieldMonth > 6000) {
        setRisk("A");
      } else if (yieldMonth > 1000 && yieldMonth <= 8000) {
        setRisk("B");
      } else {
        setRisk("C");
      }
    };
    definesRisk();
  }, [yieldMonth]);

  return (
    <div>
      <form>
        <div className="form-group">
          <label> Yield Month: </label>
          <input
            type="Number"
            placeholder="Yield Month:"
            name="yieldMonth"
            className="form-control"
            value={yieldMonth}
            onChange={changeYieldMonthHandler}
          />
        </div>

        <div className="form-group">
          <label> Risk: </label>
          <input
            disabled
            type="text"
            placeholder=""
            name="risk"
            className="form-control"
            value={risk}
          />
        </div>
      </form>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[yieldMonth，setYieldMonth]=useState（“”）；
const[risk，setRisk]=useState（“jkkkj”）；
const changeYieldMonthHandler=（事件）=>{
setYieldMonth（event.target.value）；
};
useffect（（）=>{
常量定义风险=（）=>{
如果（产量月>6000）{
setRisk（“A”）；
}否则，如果（yieldMonth>1000&&yieldMonth这里有一个大问题：

更新
state.this.state.risk='A'
的方法不正确，相反，应该像这样调用setState方法
this.setState（{risk:'A'}）

请注意，为了在状态更新时调用
definesRisk
methode，我使用了
componentDidUpate生命周期方法

下面是使用带有挂钩的react Functional组件的代码：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [yieldMonth, setYieldMonth] = useState("");
  const [risk, setRisk] = useState("jkkkj");

  const changeYieldMonthHandler = (event) => {
    setYieldMonth(event.target.value);
  };

  useEffect(() => {
    const definesRisk = () => {
      if (yieldMonth > 6000) {
        setRisk("A");
      } else if (yieldMonth > 1000 && yieldMonth <= 8000) {
        setRisk("B");
      } else {
        setRisk("C");
      }
    };
    definesRisk();
  }, [yieldMonth]);

  return (
    <div>
      <form>
        <div className="form-group">
          <label> Yield Month: </label>
          <input
            type="Number"
            placeholder="Yield Month:"
            name="yieldMonth"
            className="form-control"
            value={yieldMonth}
            onChange={changeYieldMonthHandler}
          />
        </div>

        <div className="form-group">
          <label> Risk: </label>
          <input
            disabled
            type="text"
            placeholder=""
            name="risk"
            className="form-control"
            value={risk}
          />
        </div>
      </form>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[yieldMonth，setYieldMonth]=useState（“”）；
const[risk，setRisk]=useState（“jkkkj”）；
const changeYieldMonthHandler=（事件）=>{
setYieldMonth（event.target.value）；
};
useffect（（）=>{
常量定义风险=（）=>{
如果（产量月>6000）{
setRisk（“A”）；
}否则，如果（yieldMonth>1000&&yieldMonth）您正在直接变异状态
this.state.risk=“A”
。您应该始终使用setState来更改状态。
this.setState（{risk:'A'}）
@RinkeshGolwala非常感谢您，问题解决了！您正在直接变异状态
this.state.risk=“A”
。您应该始终使用setState来更改状态。
此.setState（{risk:'A'}）
@rinkeshgolvala非常感谢您，伙计，问题解决了！
definesRisk(){
    if (this.state.yieldMonth){
        if (this.state.yieldMonth > 6000){
            this.setState({risk:'A'});
        } else if (this.state.yieldMonth > 1000 && this.state.yieldMonth <= 8000){
           this.setState({risk:'B'});
        } else {
           this.setState({risk:'C'});
        }
    }
}

import React, { Component } from "react";
import "./styles.css";

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      yieldMonth: "",
      risk: ""
    };
  }

  changeYieldMonthHandler = (event) => {
    this.setState({ yieldMonth: event.target.value });
  };

  definesRisk() {
    if (this.state.yieldMonth > 6000) {
      this.setState({ risk: "A" });
    } else if (this.state.yieldMonth > 1000 && this.state.yieldMonth <= 8000) {
      this.setState({ risk: "B" });
    } else {
      this.setState({ risk: "B" });
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevState.yieldMonth !== this.state.yieldMonth) {
      this.definesRisk();
    }
  }

  render() {
    return (
      <div>
        <form>
          <div className="form-group">
            <label> Yield Month: </label>
            <input
              type="Number"
              placeholder="Yield Month:"
              name="yieldMonth"
              className="form-control"
              value={this.state.yieldMonth}
              onChange={this.changeYieldMonthHandler}
            />
          </div>

          <div className="form-group">
            <label> Risk: </label>
            <input
              disabled
              type="text"
              placeholder=""
              name="risk"
              className="form-control"
              value={this.state.risk}
            />
          </div>
        </form>
      </div>
    );
  }
}

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [yieldMonth, setYieldMonth] = useState("");
  const [risk, setRisk] = useState("jkkkj");

  const changeYieldMonthHandler = (event) => {
    setYieldMonth(event.target.value);
  };

  useEffect(() => {
    const definesRisk = () => {
      if (yieldMonth > 6000) {
        setRisk("A");
      } else if (yieldMonth > 1000 && yieldMonth <= 8000) {
        setRisk("B");
      } else {
        setRisk("C");
      }
    };
    definesRisk();
  }, [yieldMonth]);

  return (
    <div>
      <form>
        <div className="form-group">
          <label> Yield Month: </label>
          <input
            type="Number"
            placeholder="Yield Month:"
            name="yieldMonth"
            className="form-control"
            value={yieldMonth}
            onChange={changeYieldMonthHandler}
          />
        </div>

        <div className="form-group">
          <label> Risk: </label>
          <input
            disabled
            type="text"
            placeholder=""
            name="risk"
            className="form-control"
            value={risk}
          />
        </div>
      </form>
    </div>
  );
}