Javascript 无法在“反应”输入字段中键入

当前，“我的输入”字段的默认值为1。如果我尝试在输入字段中键入内容，则不会发生任何更改

interface Orders {
    order_graph_1: number;
    order_graph_2: number;
  }

  interface MyProps extends Orders {
    setOrders: (...args: any) => void; // function which takes args...??
  }

  interface MyState extends Orders {
    //otherProperty: string;
  }
  
      

class Setup extends React.Component<MyProps, MyState>{
    state = {
        order_graph_1: this.props.order_graph_1,
        order_graph_2: this.props.order_graph_2
      };
    
      // needs to be an arrow function to access `this` properly
      // could use ( event: React.ChangeEvent<HTMLInputElement>)
      // could avoid the assertion by passing the name as an argument
      setOrders = (event: any) => {

        this.setState((prevState) => ({
          ...prevState,
          [event.target.name]: parseInt(event.target.value)
        }));
      };
    render(){
        return(
            <div className="row">
                <div className="col-6">
                    <p className="text-center">Order of first model: </p>
                    <div className="w-100 d-flex justify-content-center">
                        <input className="text-center" name="order_graph_1" type="number" value={this.props.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/>
                </div>
                </div>
            </div>
        );
    }
}

export default Setup;

每次我尝试键入输入字段时，我都会看到控制台中打印hello，但输入字段的值仍然没有改变

编辑：

这是一个JS代码（）：

类回归设置扩展了React.Component{
建造师（道具）{
超级（道具）；
这个。订单={
“order_graph_1”：this.props.order_graph_1，
“order_graph_2”：this.props.order_graph_2
}; 
}
设置命令（事件）{
this.orders[event.target.name]=parseInt（event.target.value）；
this.props.setOrders（Object.values（this.orders））；
}
render（）{
返回(
第一款车型的订单：
第二种型号的订单：

);
}
}
导出默认回归设置；

更改输入值时，图形上的一条线会根据该值进行更改。我不得不把这个代码改成Typescript。这就是我现在拥有的

interface Orders {
    order_graph_1: number;
    order_graph_2: number;
  }

  interface MyProps extends Orders {
    setOrders: (...args: any) => void; // function which takes args...??
  }

  interface MyState extends Orders {
    //otherProperty: string;
  }
  
      

class Setup extends React.Component<MyProps, MyState>{
    state = {
        // it is best not to derive state from props
        order_graph_1: this.props.order_graph_1,
        order_graph_2: this.props.order_graph_2
      };
    
      // needs to be an arrow function to access `this` properly
      // could use ( event: React.ChangeEvent<HTMLInputElement>)
      // could avoid the assertion by passing the name as an argument
      setOrders = (event: any) => {
        // I don't love this solution, but we can avoid the TS errors by copying the previous state
        this.setState((prevState) => ({
          ...prevState,
          [event.target.name]: parseInt(event.target.value)
        }));
      };
    render(){
        return(
            <div className="row">
                <div className="col-6">
                    <p className="text-center">Order of first model: </p>
                    <div className="w-100 d-flex justify-content-center">
                        <input className="text-center" name="order_graph_1" type="number" value={this.state.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/>
                </div>
                </div>
                {/* <div className="col-6">
                    <p className="text-center">Order of second model: </p>
                    <div className="w-100 d-flex justify-content-center">
                        <input className="text-center"name="order_graph_2" type="number" value={this.props.order_graph_2} onChange={this.setOrders.bind(this)} min="1" max="10"/>
                    </div>
                </div> */}
            </div>
        );
    }
}

export default Setup;   

接口命令{
顺序图1：数字；
顺序图2：数字；
}
接口MyProps扩展订单{
setOrders:（…args:any）=>void；//接受args的函数。。。？？
}
接口MyState扩展了订单{
//otherProperty：字符串；
}
类设置扩展了React.Component{
状态={
//最好不要从道具中获得状态
顺序图：this.props.order图，
顺序图2：this.props.order图2
};
//需要是箭头函数才能正确访问'this'
//可能使用（事件：React.ChangeEvent）
//可以通过将名称作为参数传递来避免断言
setOrders=（事件：任意）=>{
//我不喜欢这个解决方案，但是我们可以通过复制以前的状态来避免TS错误
this.setState（（prevState）=>({
…国家，
[event.target.name]：parseInt（event.target.value）
}));
};
render（）{
返回(
第一款车型的订单：
{/* 
第二种型号的订单：

*/}
);
}
}
导出默认设置；

---

虽然它编译时没有错误，但输入值的东西不起作用。它不会改变图形上的线条，因此我假设状态未保存。如何解决此问题？

只有React组件在状态更改时才会重新启动。因此，您应该在每次值更改时根据输入字段的值相应地更改状态，然后将此状态值加载到输入字段中。

这导致了问题

value={this.props.order\u graph\u 1}

此处的值是从props而非state派生的。理想情况下，它应该使用一些状态进行填充，onChange应该更新该状态。 因为在每次重播之后，道具不会改变，输入值仍然保持不变

---

this.state.order\u graph\u 1

应该是输入字段的值。

问题是，您使用的是从道具中获得的

order\u graph\u 1

和

order\u graph\u 2

的值，但是更新了处于状态的值，而没有更新道具中的值

正在转换的代码同时更新状态和道具（通过调用

this.props.setOrders

）。但是完全没有必要让这些变量处于组件状态

RegressionSetup

，因为它已经可以通过props访问和更新它们

从

Main

组件传递下来的

setOrders

函数也有点愚蠢，因为这两个组件都有一个属性为

order\u graph\u 1

和

order\u graph\u 2

的状态——那么为什么我们要将它们作为元组传递给

setOrders

在

Main

中，您可以删除

setOrders

函数，而是向下传递一个调用

setState

的箭头函数

<RegressionSetup
  order_graph_1={this.state.order_graph_1}
  order_graph_2={this.state.order_graph_2}
  setOrders={(orders) => this.setState(orders)}
/>

它没有理由成为一个类组件，但也没关系<代码>回归设置不需要使用状态、挂钩或生命周期方法。它只需要使用道具并返回JSX

我仍然更喜欢使用函数呈现两个输入，因为它的重复性更小，但显然您不必这样做。我们使用变量

property

从props

value={this.props[property]}

获取正确的属性，并在传递给

setOrders

的对象上设置正确的键：

onChange={（e）=>this.props.setOrders（{[property]：parseInt（e.target.value，10）}

类回归设置扩展了React.Component{
renderInput（属性：keyof OrderGraphs，标签：string）{
返回(
{label}
this.props.setOrders（{[property]：parseInt（e.target.value，10）}）
}
min=“1”
max=“10”
步骤=“1”
/>
);
}
render（）{
返回(
{this.renderInput（“order_graph_1”，“第一个模型的顺序：”）}
{this.renderInput（“order_graph_2”，“第二个模型的顺序：”）}
);
}
}

我也弄乱了其他部件。我为所有东西添加了

Props

和

State

类型。我还使用了箭头函数来消除所有的t

interface Orders {
    order_graph_1: number;
    order_graph_2: number;
  }

  interface MyProps extends Orders {
    setOrders: (...args: any) => void; // function which takes args...??
  }

  interface MyState extends Orders {
    //otherProperty: string;
  }
  
      

class Setup extends React.Component<MyProps, MyState>{
    state = {
        // it is best not to derive state from props
        order_graph_1: this.props.order_graph_1,
        order_graph_2: this.props.order_graph_2
      };
    
      // needs to be an arrow function to access `this` properly
      // could use ( event: React.ChangeEvent<HTMLInputElement>)
      // could avoid the assertion by passing the name as an argument
      setOrders = (event: any) => {
        // I don't love this solution, but we can avoid the TS errors by copying the previous state
        this.setState((prevState) => ({
          ...prevState,
          [event.target.name]: parseInt(event.target.value)
        }));
      };
    render(){
        return(
            <div className="row">
                <div className="col-6">
                    <p className="text-center">Order of first model: </p>
                    <div className="w-100 d-flex justify-content-center">
                        <input className="text-center" name="order_graph_1" type="number" value={this.state.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/>
                </div>
                </div>
                {/* <div className="col-6">
                    <p className="text-center">Order of second model: </p>
                    <div className="w-100 d-flex justify-content-center">
                        <input className="text-center"name="order_graph_2" type="number" value={this.props.order_graph_2} onChange={this.setOrders.bind(this)} min="1" max="10"/>
                    </div>
                </div> */}
            </div>
        );
    }
}

export default Setup;   

<RegressionSetup
  order_graph_1={this.state.order_graph_1}
  order_graph_2={this.state.order_graph_2}
  setOrders={(orders) => this.setState(orders)}
/>

export interface OrderGraphs {
  order_graph_1: number;
  order_graph_2: number;
}

interface Props extends OrderGraphs {
  setOrders(graphs: Partial<OrderGraphs>): void;
}

class RegressionSetup extends React.Component<Props> {
  renderInput(property: keyof OrderGraphs, label: string) {
    return (
      <div className="col-6">
        <p className="text-center">{label}</p>
        <div className="w-100 d-flex justify-content-center">
          <input
            className="text-center"
            name={property}
            type="number"
            value={this.props[property]}
            onChange={(e) =>
              this.props.setOrders({ [property]: parseInt(e.target.value, 10) })
            }
            min="1"
            max="10"
            step="1"
          />
        </div>
      </div>
    );
  }

  render() {
    return (
      <div className="row">
        {this.renderInput("order_graph_1", "Order of first model: ")}
        {this.renderInput("order_graph_2", "Order of second model: ")}
      </div>
    );
  }
}