我需要组件。首先是EditBook Component，它获取书籍详细信息，然后将其传递给UpdateBook组件。但是，我的所有击键都没有绑定到输入框。任何人都可以帮助调试这个。 这是EditBook -
"use strict";
import React from "react";
import ListingHeader from "./listingHeader";
import Listings from "./listings";
import UpdateBook from "./updateBook";
import { Route,Switch } from 'react-router-dom';
const BOOK_DETAILS_API_ENDPOINT = 'http://localhost:5001/api/v1/books/';
const header = new Headers({
'Access-Control-Allow-Origin':'*',
'Content-Type': 'multipart/form-data'
});
class EditBook extends React.Component {
constructor(props) {
super(props);
this.state = {
book: {},
isLoading: false,
error: null,
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(BOOK_DETAILS_API_ENDPOINT+this.props.match.params.id,{headers:header})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => {
this.setState({ book: data.data,isLoading: false })
})
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { book,isLoading,error } = this.state;
return (
<section className="bg-light" id="portfolio">
<div className="container">
<br/><br/>
<UpdateBook book={book} />
</div>
</section>
);
}
};
export default EditBook;
UpdateBook就像这样 -
"use strict";
import React from "react";
import ListingHeader from "./listingHeader";
import Notifications, {notify} from 'react-notify-toast';
import InputBox from '../ui/inputBox';
const UPDATE_BOOK_API_ENDPOINT = 'http://localhost:5001/api/v1/books/';
const headers = new Headers({
'Access-Control-Allow-Origin':'*',
'Content-Type': 'application/x-www-form-urlencoded'
});
class UpdateBook extends React.Component {
constructor(props) {
super(props);
this.state = {
book:{}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillReceiveProps(newProps) {
if (newProps.book !== this.props.book) {
this.setState({book: newProps.book});
}
}
handleChange(e) {
console.log(this.state.book[e.target.name]);
this.state.book[e.target.name] = e.target.value
console.log(this.state.book[e.target.name]);
}
handleSubmit(event) {
event.preventDefault();
fetch(UPDATE_BOOK_API_ENDPOINT+this.state.book.id, {
method: 'put',
headers: headers,
body: 'isbn_13='+this.state.book.isbn_13+'&isbn_10='+this.state.book.isbn_10+'&title='+this.state.book.title+'&publisher='+this.state.book.publisher+'&author='+this.state.book.author+'&page_count='+this.state.book.page_count+'&date_of_purchase='+this.state.book.date_of_purchase+'&classification='+this.state.book.classification+'&genre='+this.state.book.genre+'&first_published='+this.state.book.first_published+'&description='+this.state.book.description
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => {
this.setState({ book: data.data,bookAdded: true });
notify.show('book updated successfully!','success');
})
.catch(error => {
notify.show('Something is wrong with something!','error');
this.setState({ error, isLoading: false })
});
}
render() {
return (
<section className="bg-light" id="portfolio">
<div className="container">
<div className="row " >
<div className="col-xs-18 col-sm-12 col-md-12 card text-left">
<br/>
<h4 className="text-center">Edit {this.state.book.title}</h4>
<form onSubmit={this.handleSubmit} type="post" >
<Notifications />
<div className="centerDiv">
<img src={this.state.book.thumbnail_url} className="form-control text-center"/>
<input type="file" className="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" name="thumbnail_url" />
</div>
<div className="form-group">
<label htmlFor="isbn_10">ISBN_10 (10 characters long string)</label>
<input type="text" className="form-control" id="isbn_10" placeholder="Enter ISBN 10" name="isbn_10" value={this.state.book.isbn_10 != null ?this.state.book.isbn_10:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="title">Title</label>
<input type="text" className="form-control" id="title" placeholder="Enter Title" name="title" value={this.state.book.title != null ?this.state.book.title:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="description">Description</label>
<textarea type="text" className="form-control" id="description" placeholder="Enter description" name="description" onChange={this.handleChange} value={this.state.book.description != null ?this.state.book.description:''} rows="6">
</textarea>
</div>
<div className="form-group">
<label htmlFor="author">Author</label>
<input type="text" className="form-control" id="author" placeholder="Enter Author" name="auhtor" value={this.state.book.author != null ?this.state.book.author:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="publisher">Publisher</label>
<input type="text" className="form-control" id="publisher" placeholder="Enter Publisher" name="publisher" value={this.state.book.publisher != null ?this.state.book.publisher:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="page_count">Pages</label>
<input type="text" className="form-control" id="page_count" placeholder="Enter Pages" name="isbn" value={this.state.book.page_count != null ?this.state.book.page_count:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="date_of_purchase">Date of purchase</label>
<input type="text" className="form-control" id="date_of_purchase" placeholder="Enter Date of purchase" name="date_of_purchase" value={this.state.book.date_of_purchase != null ?this.state.book.date_of_purchase:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="first_published">First Published</label>
<input type="text" className="form-control" id="first_published" placeholder="Enter First Published" name="first_published" value={this.state.book.first_published != null ?this.state.book.first_published:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="classification">Classification</label>
<input type="text" className="form-control" id="classification" placeholder="Enter ISBN" name="classification" value={this.state.book.classification != null ?this.state.book.classification:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<label htmlFor="genre">Genre</label>
<input type="text" className="form-control" id="genre" placeholder="Enter Genre" name="genre" value={this.state.book.genre != null ?this.state.book.genre:''} onChange={this.handleChange}/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Update</button>
<button type="button" className="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
</section>
);
}
};
export default UpdateBook;
答案 0 :(得分：2)
我想你想在handleChange中调用setState：
handleChange(e) {
console.log(this.state.book[e.target.name]);
this.setState({ book[e.target.name]: e.target.value });
console.log(this.state.book[e.target.name]);
}