Реагировать: переключить только один класс, не затрагивая существующий класс

У меня есть поле 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.info(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>

javascript html twitter-bootstrap reactjs

15.07.2018 17:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

128

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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}
/>

Тогда я не совсем понимаю, что вы имеете в виду, говоря «не затрагивать существующий класс». В чем будет разница?

— 15.07.2018 17:26

Если у вас много классов по умолчанию, вы можете сделать: className = {"c1 c2 c3" + this.state.error ? " error" : ""} (обратите внимание на пробел в " error"). Или создайте функцию, если вы используете ее во многих местах: className = {this.classForInput()}.

— 21.04.2019 13:37

15.07.2018 17:13