Reactjs rest上的管理员创建表单-将firstName和lastName合并到第三个字段中

反应/重做这里的新手

我已经使用Rest上的Admin实现了一个管理门户。在创建组件中，我有一个选项卡式表单，其中包含用于各种表单字段的TextInput组件。其中包括名字、姓氏和用户名。当用户输入用户名时，我需要从firstName和lastName的前4个字符组成用户名。为了访问firstName和lastName的字段值，我尝试用redux表单修饰Create组件，但没有效果。我显然不明白redux表单是如何工作的。如何在Rest上的Admin中完成上述操作？以下是我的创建组件之一：

export const HPCreate = (props, state) => (
  <Create {...props}>
    <TabbedForm validate={validateUserCreation}>
      <FormTab label="Personal Details">
        <TextInput source="userName" validate={[required, noSpace]} options={opts} autoComplete='off'/>
        <TextInput validate={[required]} source="password" autoComplete='off' options={opts}/>
        <TextInput label="First Name" validate={[required]} source="firstName" options={opts}/>
        <TextInput label="Last Name" validate={[required]} source="lastName" options={opts}/>
        <TextInput source="phone" validate={[required]} options={opts}/>
        <TextInput source="email" validate={[required, email]} options={opts}/>
        <TextInput source="address" options={opts}/>
        <TextInput source="city" options={opts}/>
        <TextInput source="state" options={opts}/>
        <TextInput source="zip" validate={[required]} options={opts}/>
      </FormTab>
      <FormTab label="Account Details">
        <ReferenceInput label="Job Title" source="jobTitle" reference="jobtitles" allowEmpty={true}
                        validation={{required: false}}>
          <AutocompleteInput optionText="name" optionValue="name" options={autocompleteOptions}/>
        </ReferenceInput>
        <ReferenceInput label="Designation" source="designation" reference="designations" allowEmpty={true}
                        validation={{required: false}}>
          <AutocompleteInput optionText="name" optionValue="name" options={autocompleteOptions}/>
        </ReferenceInput>
        <TextInput label="Employee ID" source="employeeId" options={opts}/>
        <ReferenceInput label="Practice Type" source="practiceType" reference="practicetypes" allowEmpty={true}
                        validation={{required: false}}>
          <AutocompleteInput optionText="name" optionValue="name" options={autocompleteOptions}/>
        </ReferenceInput>
        <ReferenceInput label="Primary Network *" source="primaryNetwork" reference="facilities"
                        allowEmpty={true} validate={[required]}>
          <AutocompleteInput optionText="name" optionValue="name" options={autocompleteOptions} validate={[required]}/>
        </ReferenceInput>
        <ReferenceArrayInput label="Secondary Networks" source="secondaryNetwork" reference="facilities"
                             allowEmpty={true}>
          <SelectArrayInput optionText="name" optionValue="name" options={opts}/>
        </ReferenceArrayInput>
        <SelectInput label="User Type" source="userType"
                     choices={[
                       {id: 'PATIENT', name: 'PATIENT'},
                       {id: 'PHYSICIAN', name: 'PHYSICIAN'},
                       {id: 'STAFF', name: 'STAFF'},
                       {id: 'FRONT DESK ADMIN', name: 'FRONT DESK ADMIN'},
                       {id: 'HOSPITAL ADMIN', name: 'HOSPITAL ADMIN'},
                       {id: 'HOSPITAL SUPERADMIN', name: 'HOSPITAL SUPERADMIN'},
                       {id: 'SALES TEAM', name: 'SALES TEAM'}
                     ]}
                     options={opts}
                     validate={[required]}
        />
        <DependentInput dependsOn="neverExpire" value={false}>
          <DateInput source="expirationDate" options={opts}/>
        </DependentInput>
        <BooleanInput label="Never expire?" source="neverExpire" defaultValue={true}/>
      </FormTab>

    </TabbedForm>
  </Create>

export const HPCreate=（道具，状态）=>(

使用MapStateTops创建一个连接的组件。表单数据处于状态，您也可以使用该状态写入其他字段

class ConnectedUserNameInput extends Component {
  constructor() {
    // set your state as userName prop
  }
    componentWillRecieveProps = (nextProps) {
    this.props.input.value = nextProps.userName
   }
  render() {
    <span>{userName}</span>

  }
}

function mapStateToProps(state, props) {
   const userName = `${state.admin.form.firstName.slice(0,5)}${state.admin.form.lastName.slice(0,5)}`
   return userName
}

class ConnectedUserNameInput扩展组件{
构造函数（）{
//将您的状态设置为userName prop
}
ComponentWillReceiveProps=（下一步）{
this.props.input.value=nextrops.userName
}
render（）{
{userName}
}
}
函数mapStateToProps（状态、道具）{
const userName=`${state.admin.form.firstName.slice（0,5）}${state.admin.form.lastName.slice（0,5）}`
返回用户名
}

^^不会工作，因为状态的值需要formName作为键的一部分，例如state.admin.form{formName}.Console.log状态值以查看表单的名称。AOR正在使用Redux表单的字段组件来呈现每个组件。查看文档可以非常清楚地了解引擎盖下发生的事情

---

上面是一些拼凑的代码，我想这是一种可行的方法。面对这些问题，请随意提问。

使用MapStateTops创建一个连接的组件。表单数据处于状态，您也可以使用它来编写其他字段

class ConnectedUserNameInput extends Component {
  constructor() {
    // set your state as userName prop
  }
    componentWillRecieveProps = (nextProps) {
    this.props.input.value = nextProps.userName
   }
  render() {
    <span>{userName}</span>

  }
}

function mapStateToProps(state, props) {
   const userName = `${state.admin.form.firstName.slice(0,5)}${state.admin.form.lastName.slice(0,5)}`
   return userName
}

class ConnectedUserNameInput扩展组件{
构造函数（）{
//将您的状态设置为userName prop
}
ComponentWillReceiveProps=（下一步）{
this.props.input.value=nextrops.userName
}
render（）{
{userName}
}
}
函数mapStateToProps（状态、道具）{
const userName=`${state.admin.form.firstName.slice（0,5）}${state.admin.form.lastName.slice（0,5）}`
返回用户名
}

^^不会工作，因为状态的值需要formName作为键的一部分，例如state.admin.form{formName}.Console.log状态值以查看表单的名称。AOR正在使用Redux表单的字段组件来呈现每个组件。查看文档可以非常清楚地了解引擎盖下发生的事情

---

以上是我匆忙拼凑的零散代码，旨在为您提供一种我认为可行的方法。面对问题，请随时提问。

好的，谢谢kunal的回答，但我在准备好您的答案之前找到了我的解决方案，没有机会尝试您的建议。我能够用这种方式解决我的问题。首先，我装饰了房间创建组件，如下所示：

// Decorate with redux-form
HPCreate = reduxForm({
  form: 'record-form'  // a unique identifier for this form
})(HPCreate);

// Decorate with connect to read form values
const selector = formValueSelector('record-form'); // <-- same as form name
HPCreate = connect(
  state => {
    let {firstName, lastName} = selector(state, 'firstName', 'lastName');
    if (firstName) {
      firstName = firstName.substr(0, 4);
    }
    if (lastName) {
      lastName = lastName.substr(0, 4);
    }
    return {
      firstName,
      lastName,
      state
    };
  }
)(HPCreate);

最后，我使用redux表单方法“change”修改了firstName和lastName TextInput组件（如上所述），以修改用户名的表单字段值：

<TextInput label="First Name" validate={[required]} source="firstName" options={opts}
                     onChange={(event, newValue, previousValue) => {
                       change('userName', `${newValue.substr(0,4).toLowerCase() || ''}${lastName ? lastName.substr(0,4).toLowerCase() : ''}`);
                     }}
          />

<TextInput label="Last Name" validate={[required]} source="lastName" options={opts}
                     onChange={(event, newValue, previousValue) => {
                       change('userName', `${firstName ? firstName.substr(0,4).toLowerCase() : ''}${newValue.substr(0,4).toLowerCase() || ''}`);
                     }}
          />

{
change（'userName'，'${newValue.substr（0,4）.toLowerCase（）| |'''}${lastName？lastName.substr（0,4）.toLowerCase（）：'}'）；
}}
/>
{
change（'userName'，`${firstName？firstName.substr（0,4）.toLowerCase（）：'}${newValue.substr（0,4）.toLowerCase（）| |'}'）；
}}
/>

这将修改用户名字段的表单状态，以便它将使用正确的值提交

如果任何人有任何改进或更正，请让我知道我可以做得更好

---

谢谢。

好的，谢谢kunal的回答，但我在准备好你的解决方案之前找到了我的解决方案，没有机会尝试你的建议。我可以用这种方式解决我的问题。首先，我装饰Create组件，如下所示：

// Decorate with redux-form
HPCreate = reduxForm({
  form: 'record-form'  // a unique identifier for this form
})(HPCreate);

// Decorate with connect to read form values
const selector = formValueSelector('record-form'); // <-- same as form name
HPCreate = connect(
  state => {
    let {firstName, lastName} = selector(state, 'firstName', 'lastName');
    if (firstName) {
      firstName = firstName.substr(0, 4);
    }
    if (lastName) {
      lastName = lastName.substr(0, 4);
    }
    return {
      firstName,
      lastName,
      state
    };
  }
)(HPCreate);

最后，我使用redux表单方法“change”修改了firstName和lastName TextInput组件（如上所述），以修改用户名的表单字段值：

<TextInput label="First Name" validate={[required]} source="firstName" options={opts}
                     onChange={(event, newValue, previousValue) => {
                       change('userName', `${newValue.substr(0,4).toLowerCase() || ''}${lastName ? lastName.substr(0,4).toLowerCase() : ''}`);
                     }}
          />

<TextInput label="Last Name" validate={[required]} source="lastName" options={opts}
                     onChange={(event, newValue, previousValue) => {
                       change('userName', `${firstName ? firstName.substr(0,4).toLowerCase() : ''}${newValue.substr(0,4).toLowerCase() || ''}`);
                     }}
          />

{
change（'userName'，'${newValue.substr（0,4）.toLowerCase（）| |'''}${lastName？lastName.substr（0,4）.toLowerCase（）：'}'）；
}}
/>
{
change（'userName'，`${firstName？firstName.substr（0,4）.toLowerCase（）：'}${newValue.substr（0,4）.toLowerCase（）| |'}'）；
}}
/>

这将修改用户名字段的表单状态，以便它将使用正确的值提交

如果任何人有任何改进或更正，请让我知道我可以做得更好

---

谢谢。

谢谢你的回答。我在测试你的答案之前就找到了解决方案，但我感谢你的帮助。顺便说一句，你也可以找时间看看。可能有助于简化工作。谢谢你的回答。我在测试你的答案之前找到了解决方案，但我感谢你的帮助。顺便说一句，你也可以找时间看看。可能有助于简化工作s