Question

在我正在构建我的反应应用程序的平台上，他们将这些表单输入字段调用＆＃34;查找字段＆＃34;。基本上它们是用户无法键入的字段，但是它们单击按钮，按模式搜索值，然后单击结果以设置字段值。以下是我所描述的截图。

当我创建记录时，这些输入不会给我带来任何问题。当我尝试为记录创建编辑表单时出现问题。

以下是编辑表单呈现方式的代码。

首先检查editMode是否为active。如果是，那么它将遍历记录数组，并仅显示具有匹配id的记录。

  renderEventForm() {
    if(this.props.editMode.active) {
      const editRecordId = this.props.editMode.eventId;
      let events = this.props.events;
      for(var i in events){
          if(events[i].Id === editRecordId) {
              return <Update
                      exitEditMode={this.props.exitEditMode}
                      updateEvent={this.props.updateEvent}
                      event={events[i]}
                     />
          }
      };
    } else {
     return(
       <Create
         Owner={this.props.Owner}
         What={this.props.What}
         StartDateTime={this.props.StartDateTime}
         EndDateTime={this.props.EndDateTime}
         Who={this.props.Who}

         createEvent={this.props.createEvent}
         getWhat={this.props.getWhat}
         toggleModalContactSearch={this.toggleModalContactSearch}
       />
     )
   }
  }

渲染编辑表单组件后，会显示正确的值，但我对如何更新＆＃34;联系人＆＃34;而感到困惑。场价值。这样做的原因是我将记录作为道具传递给组件。请仔细阅读标签＆＃34; Contact＆＃34;。

import React from 'react';

class Update extends React.Component {

  constructor() {
    super();

    this.exitEditMode = this.exitEditMode.bind(this);
    this.toggleModal = this.toggleModal.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  exitEditMode() {
    this.props.exitEditMode();
  }

  handleChange(e, event) {
    const updatedEvent = {
      ...event,
      [e.target.name]: e.target.value
    }
    console.log(e.target.value, event);
    this.props.updateEvent(event, updatedEvent );
  }

  toggleModal() {
    this.props.toggleModalContactSearch();
  }

  render() {
    let event = this.props.event;
    return (
      <form className="slds-form">
        <div className="slds-form-element">
          <label className="slds-form-element__label">Assigned To</label>
          <div className="slds-form-element__control">
            <input name="OwnerName" type="text" className="slds-input" value={event.Owner ? event.Owner.Name : ''} disabled/>
            <input name="OwnerId" type="hidden" className="slds-input"  value={event.Owner ? event.Owner.Id : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Related To</label>
          <div className="slds-form-element__control">
            <input name="WhatName" type="text" className="slds-input"  value={event.What ? event.What.Name : ''} disabled/>
            <input name="WhatId" type="hidden" className="slds-input"  value={event.What ? event.What.Id : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Subject</label>
          <div className="slds-form-element__control">
            <input name="Subject" type="text" className="slds-input" onChange={(e) => this.handleChange(e,event)} value={event.Subject ? event.Subject : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Location</label>
          <div className="slds-form-element__control">
            <input name="Location" type="text" className="slds-input" onChange={(e) => this.handleChange(e,event)} value={event.Location ? event.Location : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Description</label>
          <div className="slds-form-element__control">
            <textarea ref={(input) => this.Description = input} type="textarea" onChange={(e) => this.handleChange(e,event)} className="slds-textarea" value={event.Description ? event.Description : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Event Start</label>
          <div className="slds-form-element__control">
            <input name="StartDateTime" type="text" className="slds-input" onChange={(e) => this.handleChange(e,event)} value={event.StartDateTime ? event.StartDateTime : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Event End</label>
          <div className="slds-form-element__control">
            <input name="EndDateTime" type="text" className="slds-input" onChange={(e) => this.handleChange(e,event)} value={event.EndDateTime ? event.EndDateTime : ''} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label" htmlFor="input4">Contact</label>
          <div className="slds-form-element__control">
            <section className="slds-clearfix">
              <input name="WhoName" className="slds-input" style={{maxWidth: '92%'}}  value={event.Who ? event.Who.Name : ''} disabled/>
              <input name="WhoId" type="hidden"  value={event.Who ? event.Who.Id : ''} disabled/>
              <button  type="button" 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-p-top--x-small">
          <button type="button" onClick={this.exitEditMode} className="slds-button slds-button--neutral">Exit</button>
{/*          <button type="submit" className="slds-button slds-button--brand">Update</button>
          <button type="button" className="slds-button slds-button--destructive">Delete</button> */}
        </div>
      </form>
    )
  }
}

export default Update;

＆＃34;联系人＆＃34;的价值由道具设定。在我的应用程序的根级别，状态中有Who值用于创建联系人值的记录，因此我可以将其作为支持传递给编辑表单，但要点是，是否有可能在两个道具之间徘徊输入值？根据我对React的理解，您不应该同时使用defaultValue和value，但我考虑将prop.event值放在defaultValue字段中，{ {1}}字段中的{1}}。

如果我以错误的方式解决这个问题，我会对其他实施开放，谢谢。

为记录编辑创建非传统表单输入

0 个答案: