[英]Admin on rest Create form - merge firstName and lastName into a third field
React/Redux newbie here. 在这里React / Redux新手。
I have implemented a management portal using Admin On Rest. 我已经使用Admin On Rest实现了一个管理门户。 In a Create component I have a Tabbed Form with TextInput components for various form fields.
在“创建”组件中,我具有一个选项卡式表单,其中包含用于各种表单字段的TextInput组件。 Included in those are firstName, lastName and userName.
其中包括firstName,lastName和userName。 I need to compose the username from the first 4 characters of the firstName and the lastName as the user enters the name.
当用户输入名称时,我需要根据firstName和lastName的前4个字符组成用户名。 In order to access the field values for firstName and lastName I have tried to decorate the Create component with a redux-form, but to no avail.
为了访问firstName和lastName的字段值,我尝试用redux形式装饰Create组件,但无济于事。 I clearly don't understand how redux-form works.
我显然不了解redux-form的工作原理。 How can I accomplish the above within Admin On Rest?
如何在Admin On Rest中完成上述任务? Here's one of my Create components:
这是我的创建组件之一:
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>
Create a connected component using mapStateToProps. 使用mapStateToProps创建一个连接的组件。 The form data is sitting in state and you can use that to write other fields as well.
表单数据处于状态,您也可以使用它来写其他字段。
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
}
^^ will not work as value of the state needs the formName as part of the key something like state.admin.form{formName} . ^^将不起作用,因为状态值需要formName作为密钥的一部分,例如state.admin.form {formName}。 Console.log the state value to see what the name of your form is.
Console.log状态值以查看您的表单的名称。 AOR is using the Field component of Redux-Form to render every component.
AOR使用Redux-Form的Field组件来渲染每个组件。 Looking at the docs for that will give you great clarity on whats happening under the hood.
查看有关文档,可以使您更清楚地了解幕后情况。
Above is patchy code put together in a hurry to give you an idea of an approach I think will work. 上面是匆忙整理的补丁代码,旨在让您对我认为可行的方法有所了解。 Feel free to ask questions as you face them.
面对问题时随时提出问题。
Ok, thank you to kunal for your answer, but I found my solution before I ready yours and didn't have a chance to try your suggestion. 好的,谢谢库纳尔的回答,但是我在准备好您的解决方案之前就找到了解决方案,并且没有机会尝试您的建议。 I was able to solve my problem this way.
我能够以这种方式解决我的问题。 First I decorate the Create component like so:
首先,我像这样装饰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);
Then I initialized the new connected props in my component: 然后,在组件中初始化新的连接道具:
const {
firstName, lastName, change
} = props;
Finally, I modified the firstName and lastName TextInput components (from above) like so using the redux-form method "change" to modify the form field value for userName: 最后,我修改了firstName和lastName TextInput组件(从上面),因此使用redux-form方法“ change”修改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() || ''}`);
}}
/>
This modifies the form state for the userName field so that it will submit with the proper value. 这将修改userName字段的表单状态,以便它将以正确的值提交。
If anyone has any improvements or corrections, please let me know how I could do better. 如果任何人有任何改进或更正,请告诉我如何做得更好。
Thank you. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.