N
N
newhack2020-04-25 13:36:41
React
newhack, 2020-04-25 13:36:41

How to bind ref correctly? React?

Well actually it would be desirable to understand as to me with to imitate sending of the form. Because I'm using a third party style like Ant. And there the call must be made by a function, according to the laws of react, this cannot be done. How can I do it?

class Searchh extends React.Component {
    state = {
        searchWord: '',
    }



    onChange = (e) => {
        console.log(e.target.value)
        this.setState({ searchWord: e.target.value })
    }
    addVal = (event) => {
        event.preventDefault()
        const { searchWord } = this.state
        const { onSubmit } = this.props
        onSubmit(searchWord)
    }

    activeForm = () => {
        document.getElementById('asd').click()
    }

    render() {


        return (
            <form onSubmit={this.addVal}>
                <Search
                    onChange={this.onChange}
                    placeholder="input search text"
                    enterButton="Search"
                    size="large"
                    onSearch={this.activeForm}
                />
                <input id="asd" style={{ display: "none" }} type="submit" value="dsa" />
            </form>
        )
    }
}

export default Searchh

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Davd Matevosyan, 2020-04-25
@DavMatevosyan

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

H
hzzzzl, 2020-04-25
@hzzzzl

refForm = React.createRef();

/*
  this.refForm.current.submit()
*/

return <form ref={this.refForm} />

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question