我有一个
input
哪里有?
'from-control'
班级:
<input
name="title"
className="form-control"
type="text"
placeholder="Write title..."
value={this.state.title}
onChange={this.onChange}
/>
现在我想切换
'form-control-danger'
类而不影响
'form-control'
类(当
this.state.error
是
true
或
false
)
注意:我已经在google&stackoverflow中搜索过,但没有找到正确的解决方案
以下是我完整的代码片段:
class PostForm extends React.Component {
constructor(props) {
super(props)
this.state = {
title: '',
body: '',
fetching: false,
error: false
}
}
onChange = e => {
this.setState({
[e.target.name]: e.target.value
})
}
handleFormSubmit = (e) => {
e.preventDefault()
if (!this.state.title || !this.state.body) {
this.setState({
error: true
})
return false;
}
this.setState({
fetching: true
})
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: this.state.title,
body: this.state.body
}),
headers: {
'Content-type': 'Application/json'
}
})
.then(res => res.json())
.then(res => {
console.log(res)
this.setState({
fetching: false,
title: '',
body: '',
error: false
})
})
}
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-8">
<form onSubmit={this.handleFormSubmit}>
<div className="form-group">
<label>Post Title:</label>
<input
name="title"
className="form-control"
type="text"
placeholder="Write title..."
value={this.state.title}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<label>Post Body:</label>
<textarea
name="body"
className="form-control"
placeholder="Write body text..."
value={this.state.body}
onChange={this.onChange}
></textarea>
</div>
<div className="form-group">
<button
type="submit"
className="btn btn-success"
>
{
this.state.fetching ? 'Fetching Post' : 'Submit'
}
</button>
{this.state.error && 'title or content cannot be empty'}
</div>
</form>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<PostForm />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div id="app"></div>
