1
私の状態のオブジェクト内の変数を更新しようとすると、そのオブジェクト内の他の変数を上書きするように見えます。私はbook.titleに書いてからbook.authorに書きます。しかし、私が本を記録するとき、それは私が書いた最後の値しか表示しません。オブジェクト内の状態変数を上書きすることに反応します
ご協力いただきありがとうございます。
StepOne.js
class CreateListing extends Component {
constructor(props) {
super(props);
this.handleTitleTextFieldChange = this.handleTitleTextFieldChange.bind(this);
this.handleAuthorTextFieldChange = this.handleAuthorTextFieldChange.bind(this);
this.handleYearTextFieldChange = this.handleYearTextFieldChange.bind(this);
this.handlePriceTextFieldChange = this.handlePriceTextFieldChange.bind(this);
this.handleDescTextFieldChange = this.handleDescTextFieldChange.bind(this);
this.handleIsbnTextFieldChange = this.handleIsbnTextFieldChange.bind(this);
this.log = this.log.bind(this);
this.setState({
book: {
title: '',
author: '',
year: '',
isbn: '',
price: '',
desc: ''
}
})
}
log() {
console.log(this.state.book);
}
handleTitleTextFieldChange(e) {
this.setState({
book: {title: e.target.value}
});
}
handleAuthorTextFieldChange(e) {
this.setState({
book: {author: e.target.value}
});
}
handleYearTextFieldChange(e) {
this.setState({
book: {year: e.target.value}
});
}
handleIsbnTextFieldChange(e) {
this.setState({
book: {isbn: e.target.value}
});
}
handlePriceTextFieldChange(e) {
this.setState({
book: {price: e.target.value}
});
}
handleDescTextFieldChange(e) {
this.setState({
book: {desc: e.target.value}
});
}
render() {
return (
<div>
<h3 className="home-title">Create a listing</h3>
<h4 className="create-subtitle">Step 1 - Fill in the book details</h4>
<div className="create-title">
<div className="create-title-icon">
<i className="fa fa-book fa-1.8x"></i>
</div>
<TextField
hintText="What is the book title?"
style={style.textField}
multiLine={true}
onChange={this.handleTitleTextFieldChange}
/>
</div>
<div className="create-author">
<div className="create-author-icon">
<i className="fa fa-user fa-1.8x"></i>
</div>
<TextField
hintText="Who are the book authors?"
style={style.textField}
multiLine={true}
onChange={this.handleAuthorTextFieldChange}
/>
</div>
<div className="create-year">
<div className="create-year-icon">
<i className="fa fa-calendar fa-1.8x"></i>
</div>
<TextField
hintText="What year was the book published?"
style={style.textField}
multiLine={true}
onChange={this.handleYearTextFieldChange}
/>
</div>
<div className="create-isbn">
<div className="create-isbn-icon">
<i className="fa fa-barcode fa-1.8x"></i>
</div>
<TextField
hintText="What is the book ISBN?"
style={style.textField}
multiLine={true}
onChange={this.handleIsbnTextFieldChange}
/>
</div>
<div className="create-price">
<div className="create-price-icon">
<i className="fa fa-gbp fa-1.8x"></i>
</div>
<TextField
hintText="What is the desired price?"
style={style.textField}
multiLine={true}
onChange={this.handlePriceTextFieldChange}
/>
</div>
<div className="create-desc">
<div className="create-desc-icon">
<i className="fa fa-bookmark fa-1.8x"></i>
</div>
<TextField
hintText="Short description about the condition?"
style={style.textField}
multiLine={true}
onChange={this.handleDescTextFieldChange}
/>
</div>
<div className="create-next-button">
<RaisedButton
label="Next"
backgroundColor={Colors.pink500}
labelColor={Colors.white}
fullWidth={true}
onTouchTap={this.log}
style={style.button}/>
</div>
</div>
);
}
}
ああ私は、素晴らしい作品を参照してください、ありがとう！ –