How to change value of input in Admin on Rest from another component in Create form?

Question

I've reduced this to a very simple case for ease of discussion. I have a simple create form with 1 field and 1 button. I would like the button to set the value of the TextInput to "Hello" without submitting the form. How is this possible in admin on rest? eg:

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

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

Been struggling with this for a while - it should be simple so hopefully there's an easy answer.

Answer 1

I was able to setup a Sample form using their example application

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


            );
    }
}

Before click of the button

After clicking Set Value

And then after clicking Save you can see the actual changed values get posted