[英]ReactJS: How to change Text value on button click
I am creating a form in my App and need to add a quantity field in it. 我正在我的应用程序中创建一个表单,需要在其中添加数量字段。 I have added a
<Text>
component from informed to add quantity field and used buttons to add increment and decrement feature. 我从通知中添加了
<Text>
组件以添加数量字段,并使用按钮添加了增减功能。
But I am not able to set Text component value on button click. 但是我不能在单击按钮时设置“文本”组件值。 It seems like I can only set
initialValue
for <Text>
component. 看来我只能为
<Text>
组件设置initialValue
。
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);
I have tried using value
prop but its not working. 我尝试
value
道具,但无法正常工作。 If I am using uncontrolled html <input>
field, the buttons and quantity increment decrement works but I don't want to use <input>
element with my form. 如果我使用不受控制的html
<input>
字段,则按钮和数量增量递减有效,但是我不想在表单中使用<input>
元素。
Maybe your code should be 也许你的代码应该是
onChange={quantity => this.handleChange(quantity)}
and your code to handle state update 和你的代码来处理状态更新
onChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
You're right, informed Text
doesn't have a prop value
, I found a trick on how to set the value of the Text
on a click of a button. 您是对的,知情的
Text
没有prop value
,我发现了一个技巧,只需单击一下按钮即可设置Text
的值。
You can create a ref using React.createRef
to your Text then set the value via this ref. 您可以使用
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.