如何使用reactjs中的this.refs从输入类型中获取值？

时间：2017-03-31 09:32:22

标签： javascript reactjs

无法使用this.refs获取输入类型的值... 如何从输入类型

获取值 
   export class BusinessDetailsForm extends Component {
      submitForm(data) {
        console.log(this.refs.googleInput.value)
        }
      }
      reder() {
        return(
          <form onSubmit={this.submitForm}>
            <Field type="text"
              name="location"
              component={GoogleAutoComplete}
              id="addressSearchBoxField"
              ref="googleInput"
            />
          </form>
        )
      }
    }

12 个答案:

答案 0 :(得分：19)

您应该避免使用ref="googleInput"，因为它现在被视为遗产。你应该改为声明

ref={(googleInput) => { this.googleInput = googleInput }}

在处理程序内部，您可以使用this.googleInput来引用元素。

然后在submitForm函数内部，您可以获取文本值 this.googleInput._getText()

字符串引用是遗产 https://facebook.github.io/react/docs/refs-and-the-dom.html

  

如果你以前使用过React，你可能熟悉一个旧的API，其中ref属性是一个字符串，如“textInput”，DOM节点作为this.refs.textInput访问。我们建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。如果您当前正在使用this.refs.textInput访问引用，我们建议使用回调模式。

修改

从 React 16.3 ，创建参考的格式为：

class Component extends React.Component 
{
        constructor() 
        {
            this.googleInput = React.createRef();
        }

        render() 
        {
            return 
            (
                <div ref={this.googleInput}>
                    {/* Details */}
                </div>
            );
        }
    }

答案 1 :(得分：9)

使用ref={ inputRef => this.input = inputRef }现在被认为是旧版。从React 16.3 开始，您可以使用以下代码

class MyForm extends React.Component {
    constructor(props) {
        //...
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

编辑：感谢您的评论@stormwild

答案 2 :(得分：7)

getValue: function() {
    return this.refs.googleInput.value;
  }

答案 3 :(得分：4)

我认为更惯用的方法是使用state代替refs，尽管在这种情况下它只需要更多代码，因为您只有一个输入。

export class BusinessDetailsForm extends Component {

  constructor(props) {
    super(props);
    this.state = { googleInput: '' };
    this.defaultValue = 'someValue';
    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleChange(e) {
    const { field, value } = e.target;
    this.setState({ [field]: value });
  }
  submitForm() {
    console.log(this.state.googleInput);
  }
  render() {
    return (
      <Formsy.Form onSubmit={this.submitForm} id="form_validation">
        <Field type="text"
          name="googleInput"
          onChange={this.handleChange}
          component={GoogleAutoComplete}
          floatingLabelText="location"
          hintText="location"
          id="addressSearchBoxField"
          defaultValue={this.defaultValue}
          onSelectPlace={this.handlePlaceChanged}
          validate={[ required ]}
        />
      </Formsy.Form>
    );
  }
}

请参阅https://facebook.github.io/react/docs/forms.html#controlled-components。

答案 4 :(得分：1)

在2018年，您应该在构造函数中编写以下代码： 在类的构造函数中，您应该添加类似 CIFilter

此处的示例： https://reactjs.org/docs/uncontrolled-components.html

答案 5 :(得分：1)

我尝试了上面的答案（https://stackoverflow.com/a/52269988/1978448），发现只有当我将ref置于状态时，它才对我有用，而当我仅使它们成为组件的属性时，它就不起作用。

构造函数：

this.state.refs={
  fieldName1: React.createRef(),
  fieldName2: React.createRef()
};

并在我的handleSubmit中创建一个有效负载对象，将其发布到我的服务器，如下所示：

var payload = {
  fieldName1: this.state.refs.fieldName1.current.value,
  fieldName2: this.state.refs.fieldName2.current.value,
}

答案 6 :(得分：1)

react文档很清楚地说明了这一点：https://reactjs.org/docs/refs-and-the-dom.html

这被认为是遗留物：

yourHandleMethod() {
  this.googleInput.click();
};

yourRenderCode(){
  ref={(googleInput) => { this.googleInput = googleInput }}
};

而这被认为是一种方法：

constructor(props){
  this.googleInput = React.createRef();
};
yourHandleMethod() {
  this.googleInput.current.click();
};
yourRenderCode(){
  <yourHTMLElement
    ref={this.googleInput}
  />
};

答案 7 :(得分：1)

在尝试RN 0.57.8时使用this.googleInput._getText()，导致错误_getText is not a function，因此我在控制台中打印了this.googleInput，发现_getText()是{{ 1}}

  1. _root
  2. this.googleInput._root._getText()-这将返回上一个状态而不是当前状态，使用时请小心。

答案 8 :(得分：0)

this.referenceKey.current.value

请注意，这仅适用于react类而不适用，因为它们没有实例， 不要忘记创建这样的裁判

    constructor(props) {
        super(props);
        this.button = React.createRef();
    }

请参阅： https://reactjs.org/docs/refs-and-the-dom.html

https://hackernoon.com/refs-in-react-all-you-need-to-know-fb9c9e2aeb81

https://blog.logrocket.com/how-to-use-react-createref-ea014ad09dba

答案 9 :(得分：0)

在React 16.2中，您可以使用： React.createRef

查看更多：https://reactjs.org/docs/refs-and-the-dom.html

1。使用ref = {inputRef => this.input = inputRef}

考试： 

import React, { Component } from 'react';

class Search extends Component {
    constructor(props) {
        super(props);

        this.name = React.createRef();

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.props.onSearch(`name=${this.name.value}`);
    }

    render() {
        return (
            <div>
                <input
                    className="form-control name"
                    ref={ n => this.name = n }
                    type="text"
                />

                <button className="btn btn-warning" onClick={ this.handleClick }>Search</button>
            </div>
        );
    }
}

export default Search;
  

ref = {n => this.name = n}使用回调引用-> see

或：

2。 this.name.current.focusTextInput（） 

    class Search extends Component {
        constructor(props) {
            super(props);

            this.name = React.createRef();

            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            this.props.onSearch(`name=${this.name.current.value}`);
        }

        render() {
            return (
                <div>
                    <input
                        className="form-control name"
                        ref={this.name}
                        type="text"
                    />

                    <button className="btn btn-warning" onClick={ this.handleClick }>Search</button>
                </div>
            );
        }
    }

    export default Search;

希望它会对您有所帮助。

答案 10 :(得分：0)

如果有人想知道如何使用钩子实现ref：

// Import
import React, { useRef } from 'react';


const Component = () => {
    // Create Refs
    const exemploInput = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
   
         const inputTest = exampleInput.current.value;

     }

    return(
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={input} />
            </label>
            <input type="submit" value="Submit" />
        </form>
}

答案 11 :(得分：0)

避免使用 Ref

Ref 允许您直接操作 DOM，这违背了其虚拟 DOM 的核心概念。由于性能问题，React 不鼓励我们使用 Refs。但在紧急情况下，我们可以使用它如下。

    class MyComponent extends React.Component{
       constructor{
super(props)
this.inputRef = React.createRef()
}
}

稍后在我们的 JSX 中，我们必须传递名为“ref”的属性

<input ref={this.inputRef}/>

refer to official documentation for more detail

相关问题
最新问题