javascript - 编辑记录 : conflict between props and state

Question

编辑记录时，显示在组件上的数据属于 Prop 。我得到一个错误

Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Check the render method of TerritoryDetail.

我觉得我根据文档所说的涉及 controlled components 的内容以错误的方式实现了我的编辑记录组件。 .

当编辑记录时，你不应该为字段值使用 props 吗？如果是这样的话，我的应用程序状态中有记录的值，但是如何在不使用 props 的情况下将我的应用程序状态同步到我的组件状态？

此外， Prop 说明选择选项应该在编辑时的值。但是组件状态用于监视选择选项的变化。当 Prop 由应用程序状态而不是组件状态设置时，组件状态将如何更新记录的 Prop ？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getTerritory, getTerritoryMetaData, updateTerritory, modal } from '../actions/index';
import { Link } from 'react-router';
import { reduxForm } from 'redux-form';
import TerritoryTabs from './territory-tabs';

class TerritoryDetail extends Component {

  constructor(props) {
    super(props);


    this.openSearchUserQueueModal = this.openSearchUserQueueModal.bind(this);
    this.setAssignedToType = this.setAssignedToType.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  componentWillMount() {
    // console.log(this.props);
    this.props.getTerritory(this.props.params.id);
    this.props.getTerritoryMetaData();
  }

  renderTerritoryPickList(fieldName) {
    return this.props.territoryFields.map((territoryField) => {
      const shouldRender = territoryField.name === fieldName;
      if (shouldRender) {
      return territoryField.picklistValues.map((option) => {
          return<option value={option.value}>{option.label}</option>;
      });
    }
    });
  }

  setAssignedToType(event) {
    this.setState({ assignedToType : event.target.value });
  }

  openSearchUserQueueModal(searchType) {
    this.props.modal({
      type: 'SHOW_MODAL',
      modalType: 'USER_QUEUE_SEARCH',
      modalProps: {searchType}
    })
  }

  onSubmit() {
    console.log('Update button being clicked');
    this.props.updateTerritory({
        Name: this.refs[ `Name`].value,
        tpslead__Type__c: this.refs[ `tpslead__Type__c`].value,
        tpslead__Assigned_To_Type__c: this.refs[ `tpslead__Assigned_To_Type__c`].value,
        tpslead__Assigned_To__c: this.refs['tpslead__Assigned_To__c'].value,
        tpslead__Assigned_To_ID__c: this.refs['tpslead__Assigned_To_ID__c'].value
      }, this.props.params.id);
  }

  onChangeTerritoryName(event) {
    this.props.
  }

  render() {
    if(!this.props.territory) {
      return <div>Loading...</div>;
    }

    return(
      <TerritoryTabs id={this.props.params.id} listTab="detail">
        <div className="slds-form">
              <div className="slds-form-element">
            <div className="slds-form-element__label">
                  <label className="slds-align-middle" htmlFor="input1">Lead Territory Name</label>
            </div>
            <div className="slds-form-element__control">
                  <input type="text" ref="Name" className="slds-input" value={this.props.territory.Name}/>
            </div>
          </div>
              <div className="slds-form-element">
                <label className="slds-form-element__label" htmlFor="input2">Type</label>
                <div className="slds-form-element__control">
                    <div className="slds-select_container">
                        <select ref="tpslead__Type__c" className="slds-select" value={this.props.territory.tpslead__Type__c}>
                    <option></option>
                    {this.renderTerritoryPickList('tpslead__Type__c')}
                        </select>
                    </div>
                </div>
              </div>
              <div className="slds-form-element">
                <label className="slds-form-element__label" htmlFor="input3">Assigned to Type</label>
                <div className="slds-form-element__control">
                    <div className="slds-select_container">
                        <select ref="tpslead__Assigned_To_Type__c" onChange={ this.setAssignedToType } className="slds-select" value={this.props.territory.tpslead__Assigned_To_Type__c}>
                            <option></option>
                    {this.renderTerritoryPickList('tpslead__Assigned_To_Type__c')}
                        </select>
                    </div>
                </div>
              </div>
              <div className="slds-form-element">
                <label className="slds-form-element__label">Assigned To</label>
                <div className="slds-form-element__control">
              <section className="slds-clearfix">
              <input ref="tpslead__Assigned_To__c" value={this.props.territory.tpslead__Assigned_To__c} className="slds-input slds-float--left" style={{maxWidth: '95%'}} disabled/>
              <input ref="tpslead__Assigned_To_ID__c" value={this.props.territory.tpslead__Assigned_To_ID__c} type="hidden" />
              <button onClick={this.openSearchUserQueueModal.bind(this, this.props.territory.tpslead__Assigned_To_Type__c)} className="slds-button slds-button--icon-border slds-float--right" aria-live="assertive" style={{display: 'inline'}}>
                <svg className="slds-button__icon" aria-hidden="true">
                  <use xlinkHref={searchIcon}></use>
                </svg>
              </button>
              </section>
                </div>
              </div>
              <div className="slds-form-element slds-p-top--small">
            <Link to="/" className="slds-button slds-button--neutral">
              Cancel
            </Link>
                <button type="button" onClick={this.onSubmit} className="slds-button slds-button--brand">Update</button>
              </div>
        </div>
      </TerritoryTabs>
    );
  }
}

function mapStateToProps(state) {
console.log(state);

  return { territory: state.territories.single,
           territoryFields: state.territories.fields
         };

}

export default connect(mapStateToProps, { getTerritoryMetaData, getTerritory, updateTerritory, modal })(TerritoryDetail);

Answer 1

受控组件意味着您已经提供了一个值和一个 onChange 处理程序。你必须同时拥有两者，否则 React 会报错。如果您传递 null 或 undefined 值也是如此，因此在这些情况下您需要默认为空字符串。示例:

export function TerritorySelect({ territory = '', options, onChange }) {
  const choices = options.map((o, i) => (
    <option key={i} value={o.value}>{o.label}</option>
  ));

  const update = e => onChange(e.target.value);

  return (
    <select value={territory} onChange={update}>
      {choices}
    </select>
  );
}

export default connect(
  state => ({ territory: state.territory.get('territory') }),
  { onChange: actions.updateTerritory }
)(TerritorySelect)