reactjs - React Noob - onChange 元素失去焦点

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 移动到单独的组件时工作。

common/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>
    );
  }
}

components/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) 没有生命周期方法，它们也会在更改时被卸载和重新装载。这没有清楚地记录下来，但可以在 react implementation notes 中看到(对于 SFC，type 是 SFC 函数本身)。

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

如果您只是调用 SFC 而不是实例化它(即 {SFC({...sfcProps})} 而不是 <SFC {...sfcProps}/> ，则不会为 SFC 本身创建任何虚拟 dom 组件，并且如果呈现保持不变，则不会发生重新挂载。

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

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'));

<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>

所以要解决这个问题，您可以替换每个 <FieldGroup name=.. label=.. ../>通过 {FieldGroup({name: .., label:.., ..})} , 但按照 Jaxx 的建议去做并简单地提升 FieldGroup 更有意义来自 Login类到顶层或单独的文件。