Reactjs 使用受控表单元素反应无状态组件？

我有一个哑/无状态组件，它只用于呈现表单

只是一种典型的形式

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

从“React”导入React
导出常量AuthorForm=
（{firstName，lastName，handlenchange，handlenchange}）=>(
管理作者
名字


姓


)

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

这只是呈现了传递下来的上层表单组件 值和事件处理程序的道具

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

import React，{Component}来自“React”
从“/”导入{AuthorForm}
导出类管理器扩展组件{
构造函数（）{
超级（）
此.state={
作者：{
id:“”，
名字：“，
姓氏：“
}
}
}
handlefnChange=e=>{
这是我的国家({
作者：{
名字：e.target.value
}
})
}
HandlenChange=e=>{
这是我的国家({
作者：{
姓氏：e.target.value
}
})
}
渲染=（）=>(
)
}

一切正常，但我收到了这个警告

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

---

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

这是因为当您修改其中一个组件时，作者对象会丢失

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提供的实用程序合并功能。
@andew li是一个拼写错误修复程序。您能解释一下怎么做吗？