如何在admin-on-rest中为DisabledInput绑定动态state变量？

Hey there, great question! This is absolutely possible, but your current approach isn't working because of how DisabledInput interacts with the record prop in admin-on-rest. Let me break down why, and show you a couple of working solutions.

Why Your Initial Try Failed #

The record prop on DisabledInput is intended to be passed automatically by parent form components (like SimpleForm or TabbedForm) as part of admin-on-rest's form context. When you manually pass a string directly to record (like this.state.values), it doesn't match the expected shape—record should be an object where the source prop maps to a key (e.g., { values: "item1, item2..." }). Even if you passed the right shape, DisabledInput doesn't automatically re-render when the manually passed record changes in your component state.

Solution 1: Directly Bind State to the Input's Value #

Since DisabledInput is just a wrapper around Input with the disabled flag set, you can bypass the record prop entirely and directly bind your state to the input's value prop. This gives you full control over what's displayed:

import { Input } from 'admin-on-rest';

// Inside your component's render method
<Input
  source="values"
  disabled
  value={this.state.values}
/>

This will render a disabled input that updates automatically whenever this.state.values changes (e.g., when users add items to your list box).

Solution 2: Use Field for Form Context Compatibility #

If you need the value to be part of the form's submitted data (not just displayed), use react-final-form's Field component (which admin-on-rest relies on) to wrap DisabledInput. This keeps the input synced with both your component state and the form's internal state:

import { Field } from 'react-final-form';
import { DisabledInput } from 'admin-on-rest';

// Inside your form component
<Field
  name="values"
  component={({ input }) => (
    <DisabledInput
      {...input}
      value={this.state.values}
    />
  )}
/>

Solution 3: Sync Your State with the Form's Record #

If you want the form's built-in record to reflect your state changes (so DisabledInput works as intended without manual props), update the form's value whenever your state changes. You can access the form's change method to do this:

Class Component Example #

import { SimpleForm, DisabledInput } from 'admin-on-rest';
import { FormConsumer } from 'react-final-form';

class YourForm extends React.Component {
  state = {
    values: ""
  };

  handleAddItem = (newItem) => {
    // Update your state with the new comma-separated values
    const updatedValues = this.state.values
      ? `${this.state.values}, ${newItem}`
      : newItem;
    this.setState({ values: updatedValues }, () => {
      // Sync the form's value with your state
      this.form.change('values', updatedValues);
    });
  };

  render() {
    return (
      <SimpleForm>
        {/* Use FormConsumer to get access to the form instance */}
        <FormConsumer>
          {({ form }) => {
            this.form = form;
            return null;
          }}
        </FormConsumer>
        {/* Now DisabledInput will pick up the value from the form's record */}
        <DisabledInput source="values" />
        {/* Your list box component that triggers handleAddItem */}
        <YourListBox onAddItem={this.handleAddItem} />
      </SimpleForm>
    );
  }
}

Any of these approaches will get your DisabledInput synced with your component's state. Pick the one that best fits whether you need the value included in form submissions or just displayed.

内容的提问来源于stack exchange，提问作者Cansel Muti