ReactJS: Как изменить текстовое значение при нажатии кнопки

Question

Я создаю форму в своем приложении, и мне нужно добавить в нее поле количества.Я добавил компонент <Text> из сообщил , чтобы добавить поле количества, и использовал кнопки, чтобы добавить функцию увеличения и уменьшения.

Но я не могу установить значение компонента Текст при нажатии кнопки.Кажется, я могу установить initialValue только для компонента <Text>.

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

Я пробовал использовать value prop, но он не работает.Если я использую неконтролируемое поле html <input>, кнопки и уменьшение приращения количества работают, но я не хочу использовать элемент <input> с моей формой.

Answer 1

Вы правы, проинформированы Text не имеет опоры value, я нашел способ, как установить значение Text одним нажатием кнопки.

Вы можете создать ссылку, используя React.createRef для вашего текста, а затем установить значение с помощью этой ссылки.

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

Демо здесь.

Answer 2

Может быть, ваш код должен быть

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

и ваш код для обновления состояния

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