Saya membuat formulir di Aplikasi saya dan perlu menambahkan bidang kuantitas di dalamnya. Saya telah menambahkan komponen <Text> dari diinformasikan untuk menambahkan kolom kuantitas dan tombol yang digunakan ke menambahkan fitur penambahan dan pengurangan.

Tetapi saya tidak dapat mengatur nilai komponen Teks pada klik tombol. Sepertinya saya hanya dapat mengatur initialValue untuk komponen <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);

Saya telah mencoba menggunakan prop value tetapi tidak berhasil. Jika saya menggunakan bidang <input> html yang tidak terkontrol, tombol dan pengurangan peningkatan kuantitas berfungsi tetapi saya tidak ingin menggunakan elemen <input> dengan formulir saya.

0
Jaimin Sutariya 29 Mei 2019, 13:23

2 jawaban

Jawaban Terbaik

Anda benar, menginformasikan Text tidak memiliki penyangga value, saya menemukan trik tentang cara mengatur nilai Text dengan mengklik tombol.

Anda dapat membuat referensi menggunakan React.createRef ke Teks Anda lalu atur nilainya melalui referensi ini.

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

Demo di sini.

1
Radonirina Maminiaina 29 Mei 2019, 10:43

Mungkin kode Anda seharusnya

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

Dan kode Anda untuk menangani pembaruan status

onChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}
1
Tony Ngo 29 Mei 2019, 10:28