Javascript Can'；t使用defaultValue设置反应状态

我正在尝试使用户配置文件在我的组件中可编辑。现在，当用户单击“编辑”时，配置文件将替换为一个表单，该表单的默认值为用户键入的值。但是，如果它们只更新一个字段，其他字段将被重写为空值，而不是将默认值传递给状态

有没有办法将defaultValue传递给州政府？我也尝试过value={}，但是值根本没有改变

我试图避免每个输入都有一个“编辑”按钮

class AccountEditor extends Component {
  constructor() {
    super()
    this.state = {
      isEditing: false,
      profile: {
        firstName: '',
        lastName: '',
        city: '',
        email: '',
        bio: '',
      }
    }
  }

  toggleEdit(event) {
    event.preventDefault()
    this.setState({
      isEditing: !this.state.isEditing
    })
  }

  updateProfile(event) {
    let updatedProfile = Object.assign({}, this.state.profile)
    updatedProfile[event.target.id] = event.target.value

    this.setState({
      profile: updatedProfile
    }
  }

  submitUpdate(event) {
    event.preventDefault()
    this.props.onUpdate(this.state.profile)
    this.setState({
      isEditing: !this.state.isEditing
    })
  }

  render() {
    let profile = this.props.profile
    let content = null

    if (this.state.isEditing == true) {
      content = (
        <div>
          <input
            id="firstName"
            onChange={this.updateProfile.bind(this)}
            defaultValue={profile.firstName} />
          <br />
          <input
            id="lastName"
            onChange={this.updateProfile.bind(this)}
            defaultValue={profile.lastName} />
          <br />
          <input
            id="city"
            onChange={this.updateProfile.bind(this)}
            defaultValue={profile.city} />
          <br />
          <input
            id="email"
            onChange={this.updateProfile.bind(this)}
            defaultValue={profile.email} />
          <br />
          <textarea
            id="bio"
            onChange={this.updateProfile.bind(this)}
            defaultValue={profile.bio} />
          <br />
          <button onClick={this.submitUpdate.bind(this)}>Done</button>
        </div>
      )
    } else {
      content = (
        <div>
          <h4>Name: </h4>
          <span>{profile.firstName}</span>
          <span>{profile.lastName}</span><br/>
          <h4>City: </h4>
          <span>{profile.city}</span><br/>
          <h4>Bio :</h4>
          <p>{profile.bio}</p><br />
          <button onClick={this.toggleEdit.bind(this)}>Edit</button>
        </div>
      )
    }

    return (
      <div>
        {content}
      </div>
    )
  }
}

export default AccountEditor

类AccountEditor扩展组件{
构造函数（）{
超级（）
此.state={
i编辑：错，
简介：{
名字：''，
姓氏：“”，
城市：''，
电子邮件：“”，
个人简历：''，
}
}
}
切换编辑（事件）{
event.preventDefault（）
这是我的国家({
isEditing:！this.state.isEditing
})
}
更新配置文件（事件）{
让updatedProfile=Object.assign（{}，this.state.profile）
updatedProfile[event.target.id]=event.target.value
这是我的国家({
profile:updatedProfile
}
}
提交日期（事件）{
event.preventDefault（）
this.props.onUpdate（this.state.profile）
这是我的国家({
isEditing:！this.state.isEditing
})
}
render（）{
让profile=this.props.profile
让content=null
if（this.state.isEditing==true）{
内容=(










多恩
)
}否则{
内容=(
姓名：
{profile.firstName}
{profile.lastName}

城市：
{profile.city}

生物：
{profile.bio}


编辑
)
}
返回(
{content}
)
}
}
导出默认帐户编辑器

您应该将

defaultValue

替换为

value={this.state.someProp}

constructor(props) {
    super(props)
    this.state = {
      isEditing: false,
      profile: props.profile // Setting up the initial data from the passed prop
    }
  }

及

---

有关在中使用react with form元素的详细信息。

谢谢！这几乎奏效，但为我指明了正确的方向。设置建议的状态使组件崩溃，因此我将逻辑移到componentDidMount（）它成功了。@crashspringfield组件崩溃了，因为我错过了

super

中的

props

。您需要将

props

添加到函数

super

中，如下所示

super（props）

，它应该可以正常工作。无需添加

componentDidMount（）

。另外，defaultValue={}是我想要的更多行为。当我刚刚使用value={}，它不会用我键入的内容更新状态；它始终是值。很酷。再次感谢。@crashspringfield关于值的更新-您需要查看有关受控输入的文档。建议使用

ref

引用输入值，然后使用

onChange

处理程序方法更新值。

<input id="firstName"
       onChange={ this.updateProfile.bind(this) }
       value={ this.state.profile.firstName } />