Как изменить значение ввода в Admin on Rest из другого компонента в форме создания?

Я сократил это до очень простого случая для простоты обсуждения. У меня есть простая форма создания с 1 полем и 1 кнопкой. Я хотел бы, чтобы кнопка установила значение TextInput в «Hello» без отправки формы. Как это возможно в админке на отдыхе? например:

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

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

Какое-то время боролся с этим - это должно быть просто, так что, надеюсь, есть простой ответ.

react-redux admin-on-rest

Andy Cochrane 05.03.2018 источник

Ответы (1)

arrow_upward
5
arrow_downward

Я смог настроить образец формы, используя их пример приложения.

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


            );
    }
}

До нажатия кнопки