Javascript React.js-重新提交时输入失去焦点
我只是在写文本输入，在Javascript React.js-重新提交时输入失去焦点,javascript,reactjs,Javascript,Reactjs,我只是在写文本输入，在onChange事件中调用setState，所以React会重新启动我的UI。问题是文本输入总是失去焦点，所以我需要为每个字母重新聚焦：D var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size
onChangesetStatevar 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>
);
}
});
var EditorContainer=React.createClass({
componentDidMount:函数（）{
$（this.getDOMNode（））.slimScroll（{height:this.props.height，distance:'4px'，size:'8px'}）；
},
componentDidUpdate:函数（）{
控制台日志（“zde”）；
$（this.getDOMNode（））.slimScroll（{destroy:true}）.slimScroll（{height:'auto'，distance:'4px'，size:'8px'}）；
},
changeSelectedComponentName:函数（e）{
//this.props.editor.selectedComponent.name=$（e.target.val（）；
this.props.editor.forceUpdate（）；
},
渲染：函数（）{
变量样式={
高度：this.props.height+'px'
};
返回(
{this.props.selected？{this.props.selected.name}:“”
{this.props.selected？：''}
);
}
});
当发生重新渲染时，如果看到相同的键，这将告诉React不要重做并重新生成视图，而是重用。然后重点项目应该保持重点。我刚刚遇到这个问题，来这里寻求帮助。检查你的CSS！输入字段不能有
用户选择：无或者它不能在iPad上工作。核心原因是：当React重新渲染时，您以前的DOM引用将无效。这意味着react已经更改了DOM树，而您this.refs.input.focus将无法工作，因为此处的输入不再存在。将自动聚焦
属性应用于输入
元素可以在只有一个输入需要聚焦的情况下作为一种变通方法。在这种情况下，键
属性将是不必要的，因为它只是一个元素，而且您不必担心将输入
元素分解到它自己的组件中，以避免在重新渲染主组件时失去焦点。我得到了相同的行为
代码中的问题是我创建了一个jsx元素嵌套数组，如下所示：
const example = [
[
<input value={'Test 1'}/>,
<div>Test 2</div>,
<div>Test 3</div>,
]
]
...
render = () => {
return <div>{ example }</div>
}
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>
)
}
}
如果react路由器出现问题，请使用渲染道具，而不是组件
<Route path="/user" render={() => <UserPage/>} />
}/>
失去焦点是因为组件
道具每次都使用React.createElement
而不是仅仅重新呈现更改
这里的细节：提供的答案对我没有帮助，我做的就是这样，但我有一个独特的情况
为了清理代码，我倾向于使用这种格式，直到我准备将组件拉入另一个文件
render(){
const MyInput = () => {
return <input onChange={(e)=>this.setState({text: e.target.value}) />
}
return(
<div>
<MyInput />
</div>
)
render（）{
常量MyInput=（）=>{
返回此.setState（{text:e.target.value}）/>
}
返回(
)
但当我将代码直接放在div中时，它就失去了焦点
return(
<div>
<input onChange={(e)=>this.setState({text: e.target.value}) />
</div>
)
返回(
this.setState（{text:e.target.value}）/>
)
我不知道为什么会这样，这是我用这种方式编写它的唯一问题，我在我的大多数文件中都这样做，但如果有人做类似的事情，这就是它失去焦点的原因。我在一个html表中遇到了同样的问题，其中我在一列中输入了文本行。在一个循环中，我读取了一个json对象，我创建了行，尤其是使用inputtext创建列
我用下面的方法解决了这个问题
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>
);
}
}
从“/InputTextComponent”导入{InputTextComponent}；
//导入我的InputExtComponent
...
var trElementList=（函数（list，tableComponent）{
var trList=[]，
t元素=未定义，
trElementCreator=trElementCreator，
employeeElement=未定义；
//遍历员工列表和
//为每个员工创建行
对于（var x=0；x{employeeElement['nometipologiimpatto'].toUpperCase（）}）；
trList.push（trNomeImpatto）；
trList.push（trElementCreator（employeeElement，0，x））；
trList.push（trElementCreator（employeeElement，1，x））；
trList.push（trElementCreator（employeeElement，2，x））；
}//结束
return trList；//返回行列表
函数trElementCreator（对象、字段、索引）{
var tdList=[]，
tdElement=未定义；
//我的输入文本
var InputExtArea=
tdElement=React.createElement（'td'，{style:null}，inputTextarea）；
tdList.push（tdElement）；
var trComponent=createClass({
渲染：函数（）{
返回React.createElement（'tr'，null，tdList）；
}
});
返回React.createElement（trComponent）；
}//trElementCreator的结尾
});
...
//我的桌面组件
var tableComponent=createClass({
//初始组件状态将在此处显示
//初始化值
getInitialState:函数（）{
返回{
Impattribute复合：[]，
serviceId:window.sessionStorage.getItem（'serviceId'），
serviceName:window.sessionStorage.getItem（'serviceName'），
表格_数据：[]，
successCreation:空，
};
},
//读取web api url的json数据源
componentDidMount:函数（）{
此为.serverRequest=
$.ajax({
url:url，
键入：“GET”，
contentType:'应用程序
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>
);
}
}
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>
)
}
}
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>
)
}
}
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>
)
}
}
<Field
label="Post Content"
name="text"
component={this.renderField.bind(this)}
/>
<Field
label="Post Content"
name="text"
component={this.renderField}
/>
...
// before
<input value={myVar} />
// after
<input defaultValue={myVar} />
ref={(input) => {
if (input) {
input.focus();
}
}}
<input
defaultValue={email}
className="form-control"
type="email"
id="email"
name="email"
placeholder={"mail@mail.com"}
maxLength="15"
onChange={(e) => validEmail(e.target.value)}
/>
<input
ref={(input) => {
if (input) {
input.focus();
}
}}
defaultValue={email}
className="form-control"
type="email"
id="email"
name="email"
placeholder={"mail@mail.com"}
maxLength="15"
onChange={(e) => validEmail(e.target.value)}
/>
<input ref={ref => ref && ref.focus()}
onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
/>
const Parent =() => {
const Child = () => <p>Child!</p>
return <Child />
}
const Child = () => <p>Child!</p>
const Parent = () => <Child />