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.
2 jawaban
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>
);
}
}
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
});
}