Javascript ReactJS：如何更改按钮单击时的文本值

我正在应用程序中创建表单，需要在其中添加数量字段。我已经从添加数量字段添加了一个

组件，并使用按钮添加递增和递减功能

但我无法在单击按钮时设置文本组件值。似乎我只能为

组件设置

初始值

import React, { Component } from 'react';
import { arrayOf, number, shape, string } from 'prop-types';

import classify from 'src/classify';
import defaultClasses from './quantity.css';
import { Text } from 'informed';

class Quantity extends Component {
    static propTypes = {
        classes: shape({
            root: string,
            increment_button: string,
            decrement_button: string,
            quantity_input: string
        }),
        items: arrayOf(
            shape({
                value: number
            })
        )
    };

    state = {
        quantity: 1,
        show: true,
        max: 9999,
        min: 1
    };

    incrementQty = () => {
        this.setState(prevState => {
            if(prevState.quantity < this.state.max) {
                return {
                    quantity: parseInt(prevState.quantity) + 1
                }
            } else {
                return null;
            }
        });
        /*this.setState({ quantity: parseInt(this.state.quantity) + 1 });*/
    };
    decrementQty = () => {
        this.setState(prevState => {
            if(prevState.quantity > this.state.min) {
                return {
                    quantity: parseInt(prevState.quantity) - 1
                }
            } else {
                return null;
            }
        });
        /*this.setState({ quantity: parseInt(this.state.quantity) - 1 });*/
    };
    setQuantity = quantity => this.setState({ quantity });
    handleChange = (event) => {
        this.setState({quantity: event.target.value});
    };

    render() {
        const { classes, ...restProps } = this.props;
        console.log(this.state.quantity);
        return (
            <div className={classes.root}>
            <span onClick={this.decrementQty} className={classes.decrement_button}>-</span>
            <Text
                initialValue = {`${this.state.min}`}
                className={classes.quantity_input}
                field="quantity"
                onChange={this.handleChange}
                value={this.state.quantity}
                label=""
            />
            <span onClick={this.incrementQty} className={classes.increment_button}>+</span>
            </div>
    );
    }
}

export default classify(defaultClasses)(Quantity);

import React，{Component}来自'React'；
从“道具类型”导入{arrayOf，number，shape，string}；
从“src/classify”导入分类；
从“/quantity.css”导入默认类；
从“通知”导入{Text}；
类数量扩展组件{
静态类型={
类别：形状({
根：字符串，
递增按钮：字符串，
减量按钮：字符串，
数量输入：字符串
}),
项目：阵列(
形状({
值：数字
})
)
};
状态={
数量：1，
秀：没错，
最高：9999，
min:1
};
递增数量=（）=>{
this.setState（prevState=>{
如果（prevState.quantity{
this.setState（prevState=>{
如果（prevState.quantity>this.state.min）{
返回{
数量：parseInt（prevState.quantity）-1
}
}否则{
返回null；
}
});
/*this.setState（{quantity:parseInt（this.state.quantity）-1}）*/
};
setQuantity=quantity=>this.setState（{quantity}）；
handleChange=（事件）=>{
this.setState（{quantity:event.target.value}）；
};
render（）{
const{classes，…restProps}=this.props；
console.log（this.state.quantity）；
返回(
-
+
);
}
}
导出默认分类（默认类别）（数量）；

我尝试过使用
value
prop，但它不起作用。如果我使用的是不受控制的html
字段，按钮和数量增量减量可以工作，但我不想在表单中使用
元素。
也许您的代码应该是

 onChange={quantity => this.handleChange(quantity)}

以及处理状态更新的代码

onChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

也许你的代码应该是

 onChange={quantity => this.handleChange(quantity)}

以及处理状态更新的代码

onChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

你说得对，通知
文本
没有属性
值
，我发现了一个技巧，可以通过单击按钮设置
文本
的值

您可以使用
React.createRef
为文本创建一个ref，然后通过该ref设置值

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  state = {
    min: 10
  };
  changeQt = () => {
    this.ref.current.value = 20;
  };
  render() {
    return (
      <div className="App">
        <Text
          initialValue={`${this.state.min}`}
          field="quantity"
          onChange={this.handleChange}
          label=""
          ref={this.ref}
        />
        <button onClick={this.changeQt}>Click</button>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.ref=React.createRef（）；
}
状态={
最小：10
};
changeQt=（）=>{
this.ref.current.value=20；
};
render（）{
返回(
点击
);
}
}

你说得对，被告知
文本
没有属性
值
，我发现了一个技巧，可以通过单击按钮设置
文本
的值

您可以使用
React.createRef
为文本创建一个ref，然后通过该ref设置值

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  state = {
    min: 10
  };
  changeQt = () => {
    this.ref.current.value = 20;
  };
  render() {
    return (
      <div className="App">
        <Text
          initialValue={`${this.state.min}`}
          field="quantity"
          onChange={this.handleChange}
          label=""
          ref={this.ref}
        />
        <button onClick={this.changeQt}>Click</button>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.ref=React.createRef（）；
}
状态={
最小：10
};
changeQt=（）=>{
this.ref.current.value=20；
};
render（）{
返回(
点击
);
}
}

您从哪个库使用此组件正如问题中所述，我使用的是知情的。使用钩子方法查看您使用该组件的库，如前所述，我使用的是知情的。使用hook方法查看此处感谢tony的回答，但当我单击按钮时，它不会更新文本框值。
onChange={quantity=>this.handleChange（quantity）}
的操作与
onChange={this.handleChange}相同
除了在第一种情况下，在每次渲染时都会重新创建函数。我用完整的文件代码更新了问题。正如您所看到的，我使用console.log来获取数量值，当我单击inc/dec按钮时，我可以获得正确的值。谢谢tony的回答，但当我单击按钮时，它不会更新文本框值。
onChange={quantity=>this.handleChange（quantity）}
的操作与
onChange={this.handleChange}相同
除了在第一种情况下，在每次渲染时都会重新创建函数。我用完整的文件代码更新了问题。正如你们所看到的，我使用console.log来获得数量值，当我点击inc/dec按钮时，我可以得到正确的值。谢谢你们的演示。我正在尝试实现，但面临以下警告
警告：无法为功能组件提供参考。尝试访问此ref将失败。您是否打算使用React.forwardRef（）？
和一个错误，我在其中分配值
Uncaught TypeError:无法将属性“value”设置为null
，请您指导我。您能为该错误创建一个沙箱吗？这样我就可以帮助您了！？我已经创建了一个演示，但在这里它的工作。感谢您提供的解决方案，我现在将检查我的代码并调试该问题。很高兴听到它对您有所帮助。不客气，谢谢你的演示。我正在尝试实现，但面临以下警告
警告：无法为功能组件提供参考。尝试访问此ref将失败。您是否打算使用React.forwardRef（）？
和一个错误，我在其中分配值
Uncaught TypeError:无法将属性“value”设置为null
，请您指导我。您能为该错误创建一个沙箱吗？这样我就可以帮助您了！？我已经创建了一个de