React - создание объекта стиля по всему миру

Question

Я работаю над базовым приложением для выбора цвета, чтобы изучить React и лучше понять его.

Как это работает, у меня есть текстовое поле, которое принимает шестнадцатеричные значения и отображает их как цвет фона при вводе. То, что я хочу иметь, это вернуть фоновый фон в значение по умолчанию, когда вы очищаете текстовое поле. Прямо сейчас, он возвращается к предыдущему цвету, который был набран в функциональном коде, который я до сих пор выглядят следующим образом:.

class ColorPick extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     color: "Let's pick a color" 
    }; 
    } 

    changeColor(event) { 
    var colorInput = document.getElementById('colorInput').value; 
    this.setState({ 
     color: event.target.value 
    }); 
    if (colorInput === '') { 
     this.setState({ 
     color: "Let's pick a color", 
     backgroundColor: "#fff" 
     }); 
    } 
    } 

    render() { 
    var styleObj = { 
     backgroundColor: this.state.color, 
    }; 

    return (
     <section style={styleObj} id="Profile" > 
     <h2 className="colorHeader">{this.state.color}</h2> 
     <input id="colorInput" placeholder="Enter Hex Code Here"  onChange={this.changeColor.bind(this)}/> 
     </section> 
    ); 
} 
    } 

ReactDOM.render(<ColorPick />, document.getElementById('app')); 

Для достижения клиринга на цветном фоне с пустым текстовым полем, я пытаюсь для глобализации переменной/объекта styleObj и изменить ее значение на backgroundColor: none, если значение поля пустое. вместе с тем, я объявляю это с помощью let. Таким образом, чтобы сделать, что я пробовал:

class ColorPick extends React.Component { 
    // making styleObj global and changing from var to let. 
    let styleObj = { 
    backgroundColor: this.state.color, 
    }; 

...

changeColor(event) { 
    var colorInput = document.getElementById('colorInput').value; 
    this.setState({ 
     color: event.target.value 
    }); 
    if (colorInput === '') { 
     this.setState({ 
     color: "Let's pick a color", 
     backgroundColor: "#fff" 
     }); 
     // attempting to reset back to default after text field is cleared 
     let styleObj = { 
     backgroundColor: none, 
     }; 
    } 
    } 

Однако два неожиданных результатов случилось:

1. Компонент полностью исчез со страницы после принятия styleObj ГЛОВАЛЬНЫЙ переменная объекта

2. backgroundColor становится неожиданным идентификатором.

Нельзя ли сделать этот блок CSS глобальной переменной/объектом доступным для всей области? Я также попытался изменить конкретное размещение моей переменной, начиная от права под созданием компонента, прямо над методом render. Должен ли я делать это по-другому?

Ниже приведены две вилки, функциональная версия, и версия, которая не работает с комментариями:

рабочая версия: https://codepen.io/kawnah/pen/EZqLaq?editors=0010

нерабочим версия: https://codepen.io/kawnah/pen/XpvOpp?editors=0010

EDIT: Как вы можете видеть, для моего заполнителя для моего состояния цвета я использую строку. Ожидая, что это сломается, это сработало. Зачем?

Answer 1

Проблема заключается в том, что вы используете только this.state.color в своей функции render(). Это означает, что когда поле пусто, вы пытаетесь установить CSS background-color на "Let's pick a color".

Вы также только комплект this.state.color для ответа на событие изменения. Но тогда, когда вы идете его сбросить (когда colorInput === ''), вы установили this.state.colorANDthis.state.backgroundColor? Вы должны установить this.state.backgroundColor с самого начала!

Sidenote: Вы должны честно переименовать this.state.color в нечто вроде this.state.colorLabel, или лучше, this.state.headingLabel или что-то в этом роде. Это просто для ярлыка, а не для цвета.Поэтому, называя это color, возникает путаница, как видно из некоторых других ответов.

Так что вы хотите:

changeColor(event) { 
    var colorInput = document.getElementById('colorInput').value; 
    this.setState({ 
     color: event.target.value, 
     backgroundColor: event.target.value 
    }); 
    if (colorInput === '') { 
     this.setState({ 
     color: "Let's pick a color", 
     backgroundColor: "#fff" 
     }); 
    } 
    } 

И

render() { 
    var styleObj = { 
     backgroundColor: this.state.backgroundColor, 
    }; 

    return (
     <section style={styleObj} id="Profile" > 
     <h2 className="colorHeader">{this.state.color}</h2> 
     <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/> 
     </section> 
    ); 
    } 

https://codepen.io/anon/pen/Qdeodv?editors=0010

Там даже лучшие способы реорганизовать, но это только основное разрешение.