reactjs - 用受控表单元素 react 无状态组件？

Question

我有一个哑/无状态组件，仅用于渲染表单，

只是一个典型的形式。

import React from 'react'

export const AuthorForm = 
({ firstName , lastName , handlefnChange , handlelnChange}) => (
  <form action="">
    <h2>Manage Authors</h2>
    <label htmlFor="firstName">First Name</label>
    <input type="text" name="firstName" 
      value={firstName} onChange={handlefnChange} />
    <br/>
    <label htmlFor="lastName">Last Name</label>
    <input type="text" name="lastName" 
      value={lastName} onChange={handlelnChange} />
    <br/>
    <input type="submit" value="save" />
  </form>
)

我正在从父智能组件控制此表单

这只是渲染传递下来的上层表单组件值和事件处理程序的 Prop

import React , {Component} from 'react'
import {AuthorForm} from './'

export class ManageAuthors extends Component {
  constructor(){
    super()
    this.state = {
      author:{
        id: "",
        firstName:"", 
        lastName:""
      }
    }
  }

  handlefnChange = e => {
    this.setState({
      author:{
        firstName: e.target.value
      }
    })
  }

  handlelnChange = e => {
    this.setState({
      author: {
        lastName: e.target.value
      }
    })
  }

  render = () => (
    <div>
    <AuthorForm 
      {...this.state.author}
      handlefnChange={this.handlefnChange} 
      handlelnChange={this.handlelnChange} />
    </div>
  )
}

一切正常，但我收到此警告

warning.js:36 警告:AuthorForm 正在将文本类型的受控输入更改为不受控。输入元素不应从受控切换到不受控(反之亦然)。在组件的生命周期内决定使用受控或非受控输入元件。更多信息:https://facebook.github.io/react/docs/forms.html#control-components

我可以在不转换为有状态组件的情况下解决此警告吗？

Answer 1

这是因为当您修改其中一个字段时，作者对象会丢失 firstName 或 lastName 字段:

handlefnChange = e => {
    this.setState({
      author: {
        firstName: e.target.value
        // lastName is missing!
      }
    });
  }

handlelnChange = e => {
  this.setState({
    author: {
      // firstName is missing!
      lastName: e.target.value
    }
  })
}

React 仅在 this.state 的顶层进行合并。由于 firstName 和 lastName 嵌套在 author 对象内，因此当您执行 handlefn/lnChange 并且仅设置其中之一时田地里，另一个失踪了。

修复方法是:

handlefnChange = e => {
    this.setState({
      author: {
        firstName: e.target.value,
        lastName: this.state.author.lastName
      }
    });
  }

handlelnChange = e => {
  this.setState({
    author: {
      firstName: this.state.author.firstName,
      lastName: e.target.value
    }
  })
}

或者如果你将来有两个以上的字段，使用扩展运算符进行合并会更容易:

handlefnChange = e => {
  this.setState({
    author: {
      ...this.state.author,
      firstName: e.target.value,
    }
  });
}

handlelnChange = e => {
  this.setState({
    author: {
      ...this.state.author,
      lastName: e.target.value
    }
  })
}

或者使用 lodash 的实用程序合并功能。