管理员休息创建表单 - 将firstName和lastName合并到第三个字段

Question

React/Redux新手在这里。

我已经使用Admin On Rest实施了管理门户。在Create组件中，我有一个带有TextInput组件的Tabbed Form，用于各种表单域。这些包括名字，姓氏和用户名。当用户输入名字时，我需要从firstName和lastName的前4个字符组成用户名。为了访问firstName和lastName的字段值，我试图用一个redux-form来装饰Create组件，但无济于事。我显然不明白redux形式是如何工作的。如何在Admin On Rest中完成上述操作？这是我的创建组件之一：

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> 

Answer 1

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

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 
} 

^^不会作为国家的价值工作的需要表格名称作为关键类似state.admin.form {}表格名称的一部分。 Console.log的状态值来查看你的表单的名字是什么。 AOR正在使用Redux-Form的Field组件来渲染每个组件。查看文档可以让你更清楚地了解引擎盖下的情况。

上面是拼凑的代码放在一起匆忙给你一个我认为会工作的方法的想法。随时面对他们提问。

Answer 2

好的，谢谢你的回答，但在我准备好你的之前我找到了我的解决方案，没有机会尝试你的建议。我能够通过这种方式解决我的问题。首先，我装饰创建部件，像这样：

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

然后我初始化在我的组件的新连接的道具：

const { 
    firstName, lastName, change 
    } = props; 

最后，我修改名字和姓氏的TextInput组件（从上面），像这样使用了Redux形式方法“改变”来修改表单字段值用于用户名：

<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() || ''}`); 
        }} 
      /> 

此修改用于用户名字段的形式状态，这样它会与p提交罗珀值。

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

谢谢。