Question

为了便于讨论，我将其简化为一个非常简单的案例。我有一个简单的创建表单，包含1个字段和1个按钮。我希望按钮在不提交表单的情况下将TextInput的值设置为“Hello”。管理员休息时这怎么可能？例如：

    export const TestCreate = (props) => (
    <Create title={<TestTitle />} {...props}>
        <SimpleForm>
            <TextInput source="title" />

            <TitleSetterButton />
        </SimpleForm>
    </Create>
    );

一段时间以来一直在努力 - 它应该很简单，所以希望有一个简单的答案。

Answer 1

我可以使用他们的示例应用程序

设置Sample表单

// in src/posts.js
import React from 'react';
import { List, Edit, Create, Datagrid, ReferenceField, TextField, EditButton, DisabledInput, LongTextInput, ReferenceInput, required, SelectInput, SimpleForm, TextInput } from 'admin-on-rest';

import FlatButton from 'material-ui/FlatButton';


export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="id" />
            <ReferenceField label="User" source="userId" reference="users">
                <TextField source="name" />
            </ReferenceField>
            <TextField source="title" />
            <TextField source="body" />
            <EditButton />
        </Datagrid>
    </List>
);

const PostTitle = ({ record }) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};


export class Testing extends React.Component {
        render() {
            return <input type="text" />
        }
}

export class PostCreate extends React.Component {
    componentDidMount() {
        console.log(this)
    }

    constructor(props) {
        super(props);

        this.handleCustomClick = this.handleCustomClick.bind(this);
        // this.fieldOptions = this.fieldOptions.bind(this);
    }

    handleCustomClick() {
        this.fields.title.handleInputBlur("tarun lalwani");
        this.fields.body.handleInputBlur("this is how you change it!");
    }


    render () {

        let refOptions = {ref: (e) => {
            if (e && e.constructor && e.props && e.props.name) {
                this.fields = this.fields || {};
                this.fields[e.props.name] = e;
            }
        }}

        return (
    <Edit title={<PostTitle />} {...this.props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <ReferenceInput label="User" source="userId" reference="users" validate={required}>
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" options={refOptions}/>
            <LongTextInput source="body" options={refOptions}/>
            <FlatButton primary label="Set Value" onClick={this.handleCustomClick} />
        </SimpleForm>
    </Edit>


            );
    }
}

点击按钮之前

点击Set Value

然后点击Save后，您会看到实际更改的值已过帐

如何在“创建”表单中从另一个组件更改Admin on Rest中的输入值？

1 个答案: