React如何从另一个组件获取表单元素的数据？

下面提供几种实用的实现方式，根据需求选择即可：

方案一：状态提升（推荐） #

把表单的状态移到父组件FormViz中，让QueryForm成为受控组件，父组件直接持有表单值，点击按钮就能直接使用。

修改QueryForm组件 #

class QueryForm extends React.Component {
  render() {
    // 从props接收值和变更回调
    const { value, onChange } = this.props;
    return (
      <form>
        <label>
          <textarea value={value} onChange={onChange} />
        </label>
      </form>
    );
  }
}

修改FormViz组件 #

const FormViz = ({ queryString }) => {
  // 维护表单的状态
  const [formValue, setFormValue] = React.useState('Enter Query');
  queryString = `SELECT * FROM TABLE02`;
  const { loading, error, data } = useQuery(CONST_QUERY, {
    variables: { queryString },
    onCompleted: (data) => {
      console.log(data);
    },
  });

  // 点击Run按钮时获取表单内容
  const handleRunClick = () => {
    console.log('当前表单内容:', formValue);
    // 这里可以把formValue作为参数，执行你的查询逻辑
  };

  // 处理表单输入变更
  const handleFormChange = (event) => {
    setFormValue(event.target.value);
  };

  return (
    <div>
        <QueryForm value={formValue} onChange={handleFormChange} />
        <button onClick={handleRunClick}>Run</button>
    </div>
  );
};

方案二：通过组件Ref获取值 #

如果不想改动QueryForm的核心逻辑，可以给它添加一个获取值的方法，父组件用ref调用这个方法拿到内容。

修改QueryForm组件 #

class QueryForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Enter Query'
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  // 新增方法，供父组件调用获取当前值
  getQueryValue() {
    return this.state.value;
  }

  render() {
    return (
      <form>
        <label>
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

修改FormViz组件 #

const FormViz = ({ queryString }) => {
  // 创建ref指向QueryForm组件
  const queryFormRef = React.useRef(null);
  queryString = `SELECT * FROM TABLE02`;
  const { loading, error, data } = useQuery(CONST_QUERY, {
    variables: { queryString },
    onCompleted: (data) => {
      console.log(data);
    },
  });

  const handleRunClick = () => {
    // 通过ref调用子组件的方法获取值
    const formValue = queryFormRef.current.getQueryValue();
    console.log('当前表单内容:', formValue);
  };

  return (
    <div>
        <QueryForm ref={queryFormRef} />
        <button onClick={handleRunClick}>Run</button>
    </div>
  );
};

方案三：直接访问DOM元素 #

也可以给textarea添加ref，通过DOM元素直接获取输入值，这种方式适合简单场景。

修改QueryForm组件 #

class QueryForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref指向textarea
    this.textareaRef = React.createRef();
    this.state = {
      value: 'Enter Query'
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  getQueryValue() {
    return this.textareaRef.current.value;
  }

  render() {
    return (
      <form>
        <label>
          <textarea ref={this.textareaRef} value={this.state.value} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

FormViz组件用法 #

和方案二完全一致，通过ref调用getQueryValue()方法即可拿到表单内容。

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