javascript - react : Toggle only one class without affecting the existing class

Question

我有一个 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 中进行了搜索，但没有找到正确的解决方案

Here is my full code in snippet:

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>

Answer 1

类似这样的吗？

<input
      name="title"
      className={this.state.error ? "form-control form-control-danger" : "form-control"}
      type="text"
      placeholder="Write title..."
      value={this.state.title}
      onChange={this.onChange}
/>