在react-admin中读取TextInput值并更新字符串状态的技术求助

当然可以实现这个需求！咱们来一步步梳理你的代码问题，然后给出可行的修正方案：

问题分析 #

你的代码里有几个关键细节需要调整：

• 按钮的点击事件属性写错了：React标准事件是onClick，不是clicked
• 获取表单输入值的方式不对：react-admin基于react-final-form管理表单状态，不能直接通过this.props.values读取字段值
• 状态更新存在语法错误：this.values是不存在的变量，你需要的是表单中values字段的输入内容
• 调用setState后立即打印状态会拿到旧值：因为setState是异步操作，需要在回调中获取最新状态

修正后的类组件代码 #

import { Create, SimpleForm, TextInput, SelectInput, Button } from 'react-admin';
import { connect } from 'react-redux';

class DataTypeCreate extends Component {
  state = { values: '' };

  addClickedHandler = () => {
    // 通过react-final-form的form对象获取指定字段的值
    const inputValue = this.props.form.getValues('values');
    if (!inputValue) return; // 空值时不执行后续操作
    
    // 函数式更新状态，确保拿到最新的前状态
    this.setState(prevState => ({
      values: prevState.values ? `${prevState.values}, ${inputValue}` : inputValue
    }), () => {
      // 在setState的回调中打印最新状态，避免异步导致的旧值问题
      console.log(this.state.values);
    });
  };

  render() {
    return (
      <Create {...this.props}>
        <SimpleForm 
          redirect="list" 
          validate={values => {
            const errors = {};
            ["id", "type"].forEach(field => {
              if (!values[field]) {
                errors[field] = ["Required field"];
              }
            });
            return errors;
          }}
        >
          <TextInput source="id" label="Name" />
          <SelectInput 
            source="type" 
            choices={[
              { name: "String", id: "string" },
              { name: "Enum", id: "enum" },
              { name: "Decimal", id: "decimal" }
            ]} 
          />
          <TextInput source="values" />
          {/* 修正点击事件为onClick，添加按钮文本 */}
          <Button onClick={this.addClickedHandler}>Add Value</Button>
        </SimpleForm>
      </Create>
    );
  }
}

// 通过connect从Redux store获取表单对象（react-admin默认表单名为'record-form'）
export default connect(state => ({
  form: state.form['record-form']
}))(DataTypeCreate);

更简洁的函数组件版本（推荐） #

如果愿意使用React推荐的函数组件写法，react-admin提供了useForm钩子，能更方便地获取表单状态：

import { Create, SimpleForm, TextInput, SelectInput, Button, useForm } from 'react-admin';
import { useState } from 'react';

const DataTypeCreate = (props) => {
  const [valuesState, setValuesState] = useState('');
  const form = useForm(); // 直接获取表单对象

  const addClickedHandler = () => {
    const inputValue = form.getValues('values');
    if (!inputValue) return;
    
    setValuesState(prev => prev ? `${prev}, ${inputValue}` : inputValue);
    // 如果需要打印最新状态，可直接在setValuesState后使用valuesState（函数组件状态更新是异步但可通过useEffect监听）
  };

  return (
    <Create {...props}>
      <SimpleForm 
        redirect="list" 
        validate={values => {
          const errors = {};
          ["id", "type"].forEach(field => {
            if (!values[field]) {
              errors[field] = ["Required field"];
            }
          });
          return errors;
        }}
      >
        <TextInput source="id" label="Name" />
        <SelectInput 
          source="type" 
          choices={[
            { name: "String", id: "string" },
            { name: "Enum", id: "enum" },
            { name: "Decimal", id: "decimal" }
          ]} 
        />
        <TextInput source="values" />
        <Button onClick={addClickedHandler}>Add Value</Button>
      </SimpleForm>
    </Create>
  );
};

export default DataTypeCreate;

关键说明 #

• 表单值获取：react-admin依赖react-final-form管理表单，类组件通过connect从Redux获取表单对象，函数组件直接用useForm钩子
• 状态更新：使用函数式更新确保状态的连续性，避免异步更新导致的逻辑错误
• 空值处理：添加空值判断，防止向状态中添加无效的空内容

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