React.js 因受控表单输入而失去焦点

Question

我正在尝试遵循以下处理多个输入的示例： https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

我尝试添加两个表单元素，firstName 和 lastName。一个在主 render() 函数中呈现，而另一个是使用名为 LastName() 的单独 JSX 函数创建的。

结果可在此处获得： https://codepen.io/sagiba/pen/Kmdrdz?editors=0010

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2,
      firstName: 'John',
      lastName: 'Doe'
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    const LastName = () => {
      return (
        <label>
          Last Name:
          <input
            name="lastName"
            type="text"
            value={this.state.lastName}
            onChange={this.handleInputChange} />
        </label>
      );
    };
    
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          First Name:
          <input
            name="firstName"
            type="text"
            value={this.state.firstName}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <LastName />
      </form>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

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

两者都按预期呈现。但是，当尝试编辑姓氏的值时，组件会失去对每次击键的关注。 firstName 不会发生这种情况。

我做错了什么？

Answer 1

每次状态发生变化时，React 都会重新渲染应用程序。因此，它会运行函数来重新创建您的姓氏组件；该函数每次都会返回一些“新”的东西。只需将其从功能中删除，您就会很高兴。

render() { 
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          First Name:
          <input
            name="firstName"
            type="text"
            value={this.state.firstName}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Last Name:
          <input
            name="lastName"
            type="text"
            value={this.state.lastName}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}