Reactjs: Jsx тройной встроенный компонент (вложенные тройники)

Question

У меня есть реактивный бутстрап <Checkbox >.

Это выглядит следующим образом:

<Checkbox inline onClick={this.handleInclude}> Include </Checkbox> 

В некоторых случаях я хочу Checkbox быть проверены. Апите предлагает делать следующее, если вы хотите его проверили:

<Checkbox checked inline onClick={this.handleInclude}> Include </Checkbox>

Так что теперь я только хочу, чтобы использовать checked ключевое слово во время определенных состояний .. поэтому я попытался использовать трехкомпонентное заявление:

<Checkbox 
    {this.state.chkbox === true ? "checked" : "" } 
    inline 
    onClick={this.handleInclude}> 
    Include 
</Checkbox> 

Но это вызывает ошибку Unexpected token. Как вы должны это делать, реагируя?

EDIT:

Я забыл упомянуть, что флажок действительно завернутые в тройном

{this.state.currentView == "timeline" ? 
     <Checkbox 
     {this.state.chkbox === true ? "checked" : "" } 
     inline 
     onClick={this.handleInclude}> 
     Include 
    </Checkbox> 
: "" 
} 

я получаю символическую ошибку JSX при использовании внутренних { } тегов в тройном операторе.

Answer 1

Реагирующие ручки boolean form inputs с использованием checked.

<input type={"checkbox"} checked={true} /> 
<input type={"checkbox"} checked={false} /> 

Компонент должен слушать onChange событий, особенно когда это контролируется форма ввода.

<input type={"checkbox"} checked={this.state.checked} onChange={this.onChange} /> 

Кроме того, возглавляет:

Имейте в виду, что, в попытке нормализовать обработку для CheckBox и радио входов изменения, React использует click событие вместо change события. По большей части это ведет себя так, как ожидалось, за исключением случаев, когда вы звоните preventDefault в обработчик change. preventDefault останавливает браузер от визуального обновления ввода, даже если checked переключается. Это можно обойти либо путем удаления вызова до preventDefault, либо для переключения переключателя в setTimeout.

Подводя итог, не назовите event.preventDefault() в вашем методе this.onChange(event).

---

Редактировать

В JSX, следующий синтаксис означает то же самое.

<input checked /> 
<input checked={true} /> 

См. boolean attributes section в документах.