Question

我尝试创建一个接受用户凭据并将其提交到登录API的基本登录页面。问题是当onChange事件触发时，要设置用户凭据，该元素将失去焦点。我是否应该使用onChange更新凭据？

import React, {Component, PropTypes} from 'react';
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap';

export default class Login extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {credentials: {username: '', password: ''}};
    this.onChange = this.onChange.bind(this);
    this.onSave = this.onSave = this.onSave.bind(this);
  }

  onChange(event) {
    const field = event.target.name;
    const credentials = this.state.credentials;
    credentials[field] = event.target.value;
    return this.setState({credentials: credentials});
    console.log(event);
  }

  onSave(event) {
    event.preventDefault();
    console.log(this.state.credentials);
    this.props.actions.logInUser(this.state.credentials);
  }

  render() {
    function FieldGroup({ id, label, help, ...props }) {
      return (
        <FormGroup controlId={id}>
          <ControlLabel>{label}</ControlLabel>
          <FormControl {...props} />
          {help && <HelpBlock>{help}</HelpBlock>}
        </FormGroup>
      );
    }

    const formInstance = (


          <Col xs={12} md={8} mdOffset={2}>
            <form>
              <FieldGroup
                name="username"
                label="Username"
                placeholder="Enter username"
                value={this.state.credentials.username}
                onChange={this.onChange}
              />
              <FieldGroup
                name="password"
                label="Password"
                type="password"
                placeholder="Enter password"
                value={this.state.credentials.password}
                onChange={this.onChange}
              />
              <Checkbox checked readOnly>
                Checkbox
              </Checkbox>

              <Button type="submit" onClick={this.onSave}>
                Submit
              </Button>
            </form>
          </Col>

    );
    return formInstance;
  }
}

修改

按照建议将FieldGroup移动到单独的组件时工作。

公共/ FieldGroup.jsx

import React from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock} from 'react-bootstrap';

export default class FieldGroup extends React.Component {
  constructor(props) {
    super(props);
    console.log('props');
    console.log(props);
    this.id = props.name;
    this.label = props.label;
    this.help = props.placeholder;
  }
  render() {
    return (
      <FormGroup controlId={this.props.name}>
        <ControlLabel>{this.props.label}</ControlLabel>
        <FormControl {...this.props} />
        {this.props.help && <HelpBlock>{this.props.help}</HelpBlock>}
      </FormGroup>
    );
  }
}

组件/ Login.jsx

import React, {Component, PropTypes} from 'react';
import {Col, Checkbox, Button} from 'react-bootstrap';
import FieldGroup from '../common/FieldGroup';

export default class Login extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {credentials: {username: '', password: ''}};
    this.onChange = this.onChange.bind(this);
    this.onSave = this.onSave = this.onSave.bind(this);
  }

  onChange(event) {
    const field = event.target.name;
    const credentials = this.state.credentials;
    credentials[field] = event.target.value;
    return this.setState({credentials: credentials});
  }

  onSave(event) {
    event.preventDefault();
    console.log(this.state.credentials);
    this.props.actions.logInUser(this.state.credentials);
  }

  render() {
    return (
      <Col xs={12} md={8} mdOffset={2}>
        <form>
          <FieldGroup
            name="username"
            label="Username"
            placeholder="Enter username"
            value={this.state.credentials.username}
            onChange={this.onChange}
          />
          <FieldGroup
            name="password"
            label="Password"
            type="password"
            placeholder="Enter password"
            value={this.state.credentials.password}
            onChange={this.onChange}
          />
          <Checkbox checked readOnly>
            Checkbox
          </Checkbox>

          <Button type="submit" onClick={this.onSave}>
            Submit
          </Button>
        </form>
      </Col>
    )
  }
}

Answer 1

这是一个有趣的问题，因为它表明即使无状态功能组件（SFC＆＃s;）没有生命周期方法，它们也会在更改时卸载并重新安装。这一切都没有明确记录，但可以在react implementation notes中看到（在SFC的情况下，type是SFC函数本身。）

因为FieldGroup在render内声明，所以在每次渲染时都会创建一个新函数，这会导致虚拟dom中的先前SFC组件卸载并被新的替换。即使它们的渲染完全相同，也会发生这种情况。因此，任何后代输入元素都将卸载并重新安装，在此过程中失去状态和焦点。

如果您只是调用SFC而不是实例化它（即{SFC({...sfcProps})}而不是<SFC {...sfcProps}/>，则不会为SFC本身创建虚拟dom组件，如果渲染保持不变，则不会进行重新安装

此代码段显示本地SFC，实例化并作为函数调用，以及常规顶级SFC。只有底部的两个输入正常工作。

＆＃13;

const SFC = ({rerender}) => <input onChange={rerender}/>

class App extends React.Component {
  rerender = () => this.forceUpdate();

  render () {
    const LocalSFC = ({rerender}) => <input onChange={rerender}/>
    return (
      <div>
        <div>Local SFC (loses state & focus on typing): <LocalSFC rerender={this.rerender}/></div>
        <div>Local function application (works fine): {LocalSFC({rerender: this.rerender})}</div>
        <div>Regular SFC (works fine): <SFC rerender={this.rerender}/></div>
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
  <div id="app"></div>
</body>

＆＃13;

因此，为了解决问题，您可以将每个<FieldGroup name=.. label=.. ../>替换为{FieldGroup({name: .., label:.., ..})}，但是按照Jaxx的建议更有意义，只需将FieldGroup从Login中移除} class到顶级或单独的文件。

Answer 2

在onChange函数内返回将导致它失去元素的焦点。从return功能中删除onChange。

您无需返回setState。

React Noob - onChange元素失去焦点

2 个答案: