Я просто пишу для ввода текста и в onChange событии я вызываю setState, поэтому React изменяет мой пользовательский интерфейс. Проблема в том, что ввод текста всегда теряет фокус, поэтому мне нужно снова сконфигурировать его для каждой буквы: D.
var EditorContainer = React.createClass({
componentDidMount: function () {
$(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
},
componentDidUpdate: function () {
console.log("zde");
$(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
},
changeSelectedComponentName: function (e) {
//this.props.editor.selectedComponent.name = $(e.target).val();
this.props.editor.forceUpdate();
},
render: function () {
var style = {
height: this.props.height + 'px'
};
return (
<div className="container" style={style}>
<div className="row">
<div className="col-xs-6">
{this.props.selected ? <h3>{this.props.selected.name}</h3> : ''}
{this.props.selected ? <input type="text" value={this.props.selected.name} onChange={this.changeSelectedComponentName} /> : ''}
</div>
<div className="col-xs-6">
<ComponentTree editor={this.props.editor} components={this.props.components}/>
</div>
</div>
</div>
);
}
});
Не видя остальной код, это предположение. Когда вы создаете EditorContainer, укажите уникальный ключ для компонента:
<EditorContainer key="editor1"/>
При повторном рендеринге, если один и тот же ключ будет замечен, это скажет, что React не скроется и не восстановит представление, а повторное использование. Затем сфокусированный элемент должен сохранять фокус.
Если это проблема в ответном маршрутизаторе <Route/>, используйте render prop вместо component.
<Route path="/user" render={() => <UserPage/>} />
Потеря фокуса происходит, потому что component prop использует React.createElement каждый раз вместо того, чтобы просто перерисовывать изменения.
Подробности здесь: https://reacttraining.com/react-router/web/api/Route/component
Я возвращаюсь сюда снова и снова и всегда нахожу решение для моего другого места в конце. Итак, я задокументирую это здесь, потому что я знаю, что забуду это снова!
Причина, по которой input теряли фокус в моем случае, была связана с тем, что я повторно отображал input при изменении состояния.
import React from 'react';
import styled from 'styled-components';
class SuperAwesomeComp extends React.Component {
state = {
email: ''
};
updateEmail = e => {
e.preventDefault();
this.setState({ email: e.target.value });
};
render() {
const Container = styled.div'';
const Input = styled.input'';
return (
<Container>
<Input
type="text"
placeholder="Gimme your email!"
onChange={this.updateEmail}
value={this.state.email}
/>
</Container>
)
}
}
Итак, проблема в том, что я всегда начинаю кодировать все в одном месте, чтобы быстро протестировать, а потом разбить все на отдельные модули. Но здесь эта стратегия имеет неприятные последствия, потому что обновление состояния при изменении входа запускает функцию рендеринга, и фокус теряется.
Исправить несложно, выполнить модуляризацию с самого начала, другими словами: "Переместить компонент Input из функции render ".
import React from 'react';
import styled from 'styled-components';
const Container = styled.div'';
const Input = styled.input'';
class SuperAwesomeComp extends React.Component {
state = {
email: ''
};
updateEmail = e => {
e.preventDefault();
this.setState({ email: e.target.value });
};
render() {
return (
<Container>
<Input
type="text"
placeholder="Gimme your email!"
onChange={this.updateEmail}
value={this.state.email}
/>
</Container>
)
}
}
Ссылка к решению: https://github.com/styled-components/styled-components/issues/540#issuecomment-283664947
Мой ответ похож на то, что сказал @z5h.
В моем случае я использовал Math.random() для генерации уникального key для компонента.
Я думал, что key используется только для запуска рендеринга для этого конкретного компонента, а не для рендеринга всех компонентов в этом массиве (я возвращаю массив компонентов в моем коде). Я не знал, что он используется для восстановления состояния после перерисовки.
Удаление этого сделало работу для меня.
PS: Я мог бы прокомментировать это, но у меня недостаточно репутации для этого.
Я просто столкнулся с этой проблемой и пришел сюда за помощью. Проверьте свой CSS! Поле ввода не может иметь user-select: none; или оно не будет работать на iPad.
У меня такое же поведение.
Проблема в моем коде заключалась в том, что я создал вложенный массив элементов jsx, например:
const example = [
[
<input value={'Test 1'}/>,
<div>Test 2</div>,
<div>Test 3</div>,
]
]
...
render = () => {
return <div>{ example }</div>
}
Каждый элемент этого вложенного массива перерисовывается каждый раз, когда я обновляю родительский элемент. И поэтому входы теряют там "ref" опору каждый раз
Я исправил проблему с преобразованием внутреннего массива в реагирующий компонент (функция с функцией рендеринга)
const example = [
<myComponentArray />
]
...
render = () => {
return <div>{ example }</div>
}
РЕДАКТИРОВАТЬ:
Та же проблема возникает, когда я создаю вложенный React.Fragment
const SomeComponent = (props) => (
<React.Fragment>
<label ... />
<input ... />
</React.Fragment>
);
const ParentComponent = (props) => (
<React.Fragment>
<SomeComponent ... />
<div />
</React.Fragment>
);
Применение атрибута autoFocus к элементу input может выполняться в качестве обходного пути в ситуациях, когда требуется только один ввод, который необходимо сфокусировать. В этом случае атрибут key был бы лишним, потому что это всего лишь один элемент, и вам больше не придется беспокоиться о том, чтобы разбивать элемент input на свой собственный компонент, чтобы избежать потери внимания при повторном рендеринге основного компонента.
Основная причина заключается в следующем: при повторном рендеринге React ваш предыдущий DOM-код будет недействительным. Это означает, что реакция изменила дерево DOM, и вы this.refs.input.focus не будут работать, потому что вход здесь больше не существует.
Ответы не помогли мне, вот что я сделал, но у меня была уникальная ситуация.
Чтобы очистить код, я стараюсь использовать этот формат, пока не буду готов вытащить компонент в другой файл.
render(){
const MyInput = () => {
return <input onChange={(e)=>this.setState({text: e.target.value}) />
}
return(
<div>
<MyInput />
</div>
)
Но это заставило его потерять фокус, когда я поместил код непосредственно в div, с которым он работал.
return(
<div>
<input onChange={(e)=>this.setState({text: e.target.value}) />
</div>
)
Я не знаю, почему это так, это единственная проблема, с которой я столкнулся, написав ее таким образом, и я делаю это в большинстве файлов, которые у меня есть, но если кто-то делает подобное, то почему он теряет фокус.
У меня была такая же проблема с HTML-таблицей, в которой у меня есть строки ввода текста в столбце. внутри цикла я читаю объект json и создаю строки, в частности, у меня есть столбец с inputtext.
http://reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/
Мне удалось решить это следующим образом
import { InputTextComponent } from './InputTextComponent';
//import my inputTextComponent
...
var trElementList = (function (list, tableComponent) {
var trList = [],
trElement = undefined,
trElementCreator = trElementCreator,
employeeElement = undefined;
// iterating through employee list and
// creating row for each employee
for (var x = 0; x < list.length; x++) {
employeeElement = list[x];
var trNomeImpatto = React.createElement('tr', null, <td rowSpan="4"><strong>{employeeElement['NomeTipologiaImpatto'].toUpperCase()}</strong></td>);
trList.push(trNomeImpatto);
trList.push(trElementCreator(employeeElement, 0, x));
trList.push(trElementCreator(employeeElement, 1, x));
trList.push(trElementCreator(employeeElement, 2, x));
} // end of for
return trList; // returns row list
function trElementCreator(obj, field, index) {
var tdList = [],
tdElement = undefined;
//my input text
var inputTextarea = <InputTextComponent
idImpatto={obj['TipologiaImpattoId']}//index
value={obj[columns[field].nota]}//initial value of the input I read from my json data source
noteType={columns[field].nota}
impattiComposite={tableComponent.state.impattiComposite}
//updateImpactCompositeNote={tableComponent.updateImpactCompositeNote}
/>
tdElement = React.createElement('td', { style: null }, inputTextarea);
tdList.push(tdElement);
var trComponent = createClass({
render: function () {
return React.createElement('tr', null, tdList);
}
});
return React.createElement(trComponent);
} // end of trElementCreator
});
...
//my tableComponent
var tableComponent = createClass({
// initial component states will be here
// initialize values
getInitialState: function () {
return {
impattiComposite: [],
serviceId: window.sessionStorage.getItem('serviceId'),
serviceName: window.sessionStorage.getItem('serviceName'),
form_data: [],
successCreation: null,
};
},
//read a json data soure of the web api url
componentDidMount: function () {
this.serverRequest =
$.ajax({
url: Url,
type: 'GET',
contentType: 'application/json',
data: JSON.stringify({ id: this.state.serviceId }),
cache: false,
success: function (response) {
this.setState({ impattiComposite: response.data });
}.bind(this),
error: function (xhr, resp, text) {
// show error to console
console.error('Error', xhr, resp, text)
alert(xhr, resp, text);
}
});
},
render: function () {
...
React.createElement('table', {style:null}, React.createElement('tbody', null,trElementList(this.state.impattiComposite, this),))
...
}
//my input text
var inputTextarea = <InputTextComponent
idImpatto={obj['TipologiaImpattoId']}//index
value={obj[columns[field].nota]}//initial value of the input I read //from my json data source
noteType={columns[field].nota}
impattiComposite={tableComponent.state.impattiComposite}//impattiComposite = my json data source
/>//end my input text
tdElement = React.createElement('td', { style: null }, inputTextarea);
tdList.push(tdElement);//add a component
//./InputTextComponent.js
import React from 'react';
export class InputTextComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
idImpatto: props.idImpatto,
value: props.value,
noteType: props.noteType,
_impattiComposite: props.impattiComposite,
};
this.updateNote = this.updateNote.bind(this);
}
//Update a inpute text with new value insert of the user
updateNote(event) {
this.setState({ value: event.target.value });//update a state of the local componet inputText
var impattiComposite = this.state._impattiComposite;
var index = this.state.idImpatto - 1;
var impatto = impattiComposite[index];
impatto[this.state.noteType] = event.target.value;
this.setState({ _impattiComposite: impattiComposite });//update of the state of the father component (tableComponet)
}
render() {
return (
<input
className="Form-input"
type='text'
value={this.state.value}
onChange={this.updateNote}>
</input>
);
}
}
Для меня это было вызвано тем, что поле ввода поиска отображалось в том же компоненте (называемом UserList), что и список результатов поиска. Таким образом, всякий раз, когда результаты поиска менялись, весь компонент UserList перерисовывался, включая поле ввода.
Моим решением было создать совершенно новый компонент с именем UserListSearch, который отделен от UserList. Мне не нужно было устанавливать ключи в полях ввода в UserListSearch, чтобы это работало. Функция рендеринга моего UsersContainer теперь выглядит следующим образом:
class UserContainer extends React.Component {
render() {
return (
<div>
<Route
exact
path={this.props.match.url}
render={() => (
<div>
<UserListSearch
handleSearchChange={this.handleSearchChange}
searchTerm={this.state.searchTerm}
/>
<UserList
isLoading={this.state.isLoading}
users={this.props.users}
user={this.state.user}
handleNewUserClick={this.handleNewUserClick}
/>
</div>
)}
/>
</div>
)
}
}
Надеюсь, это кому-то тоже поможет.
Оказывается, я связывал this с компонентом, который вызывал его повторное рендеринг.
Я решил опубликовать это здесь на случай, если у кого-то еще будет эта проблема.
Я должен был изменить
<Field
label="Post Content"
name="text"
component={this.renderField.bind(this)}
/>
к
<Field
label="Post Content"
name="text"
component={this.renderField}
/>
Простое исправление, так как в моем случае мне не нужно было this renderField в renderField, но, надеюсь, моя публикация поможет кому-то еще.
Я переключил value prop в defaultValue. Это подходит для меня.
...
// before
<input value={myVar} />
// after
<input defaultValue={myVar} />
Моя проблема заключалась в том, что я назвал свой ключ динамически со значением элемента, в моем случае "name", поэтому ключ был key = {${item.name}-${index}}. Поэтому, когда я хотел изменить ввод с помощью item.name в качестве значения, они также меняли ключ и, следовательно, реагировал, не распознавал этот элемент.