Question

React / Redux新手在这里。

我使用Admin On Rest实施了一个管理门户。在创建组件中，我有一个带有TextInput组件的选项卡表单，用于各种表单域。其中包括firstName，lastName和userName。当用户输入名称时，我需要从firstName和lastName的前4个字符组成用户名。为了访问firstName和lastName的字段值，我尝试用redux-form装饰Create组件，但无济于事。我显然不了解redux-form的工作原理。如何在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
}

^^将不起作用，因为状态值需要formName作为键的一部分，如state.admin.form {formName}。 Console.log状态值以查看表单的名称。 AOR使用Redux-Form的Field组件来渲染每个组件。查看文档可以让您清楚地了解幕后发生的事情。

上面是匆忙的拼凑代码，让您了解我认为可行的方法。当你面对问题时，请随意提问。

Answer 2

好的，谢谢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);

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

const {
    firstName, lastName, change
  } = props;

最后，我修改了firstName和lastName TextInput组件（从上面开始），就像使用redux-form方法＆＃34;更改＆＃34;修改userName的表单字段值：

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

这会修改userName字段的表单状态，以便它以正确的值提交。

如果有人有任何改进或更正，请告诉我如何做得更好。

谢谢。

Admin on rest创建表单 - 将firstName和lastName合并到第三个字段中

2 个答案: