Я не могу заполнить ничего в TextField, обернутой TableRowColumn

Question

Я использую материал-UI и его компоненты хороши, но когда я пытаюсь использовать таблицу, проблема бывает ...

<TableBody 
displayRowCheckbox={true} 
> 
<TableRow> 
    <TableRowColumn><TextField hintText="hintText"></TableRowColumn> 
</TableRow> 
<TableBody> 

Это только часть моего кода. Когда я заполняю что-то в TextField, вся строка активируется и флажок установлен. Даже я не могу ничего заполнить в TextField. Я хочу активировать флажок только, когда я нажимаю флажок, а не всю строку, а затем заполняю что-то внутри TextField. Есть ли какие-либо свойства, которые я могу решить эту проблему?

Плюс, я попробовал histStyle={{textAlign: 'center' в TextField, чтобы сделать histText установленным в центре. Однако он не работает. Пожалуйста, помогите мне.

Answer 1

Добавить onClick обработчик вашего TextField, который останавливает распространение события до ячейки таблицы/строки:

<TextField onClick={(e) => e.stopPropagation()} hintText="hintText" />