残りの管理者フォームを作成 - firstNameとlastNameを3番目のフィールドにマージします

Question

React/Redux newbie here。

私はAdmin On Restを使用して管理ポータルを実装しました。 Createコンポーネントでは、さまざまなフォームフィールドのTextInputコンポーネントを含むTabbed Formがあります。これらには、firstName、lastName、およびuserNameが含まれます。私はfirstNameとlastNameの最初の4文字からユーザ名を作成する必要があります。 firstNameとlastNameのフィールド値にアクセスするために、私はredux-formでCreateコンポーネントをデコレートしようとしましたが、無駄にしました。私は明らかにredux形式がどのように働くのか理解していない。 Admin On Restでは上記の方法をどのように達成できますか？私の作成コンポーネントの1つは次のとおりです。

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 {formName}のようなキーの一部としてformNameを必要とするため、^^は機能しません。 Console.logはあなたのフォームの名前が何であるかを見るための状態値です。 AORは、Redux-FormのFieldコンポーネントを使用してすべてのコンポーネントをレンダリングしています。ドキュメントを見ると、フードの中で何が起こっているのかを明確に知ることができます。

上記のコードは、私がうまくいくと思うアプローチのアイデアを伝えるために急いでまとめられています。あなたが直面しているように質問をすることは自由です。

Answer 2

あなたの答えは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); 

は、その後、私は私のコンポーネントに新しい接続小道具を初期化：

const { 
    firstName, lastName, change 
    } = props; 

は最後に、私はそうのように、姓と名のTextInputコンポーネント（上から）を変更まず私はそうのようなコンポーネントを作成を飾りますuserNameのフォームフィールドの値を変更するためにReduxの形式のメソッド「変更」を使用して：それはPで提出するよう

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

これは、ユーザー名フィールドのためのフォームの状態を変更しますロッパ価値。

改善や訂正がある場合は、どのように改善できるか教えてください。

ありがとうございます。