Как правильно привязать ref? React?

Question

[newhacke]

Ну собственно хотелось бы понять как мне с имитировать отправку формы. Потому что я использую стороннию стилизицаию ввиде Ant. И там вызов надо делать функцией, соответствено по законам реакта так делать нельзя. А как мне сделать?

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 1

[Davd Matevosyan]

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

Comments

[newhacke]

можно ли это сделать не используя конструктор?

[Davd Matevosyan]

можно
myRef = React.createRef();

[Davd Matevosyan]

когда пишешь
state = {}

тоже самое что

constructor(props) {
    super(props);
    this.state = {}
  }

[newhacke]

можешь скопировать код и вставить так как это будет работать? Проблема в том, что я это все пробовал.

включая то, как обратить потом к этому реф и как вызвать эту функцию

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

[newhacke]

спасибо!

Answer 2

[hzzzzl]

refForm = React.createRef();

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

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

Comments

[newhacke]

а где ее создать в моем примере? Можно ли ее сделать без конструктора?

[hzzzzl]

newhacke,

class Searchh extends React.Component {
  refForm = React.createRef()

  activeForm = () => {
    this.refForm.current.submit()
  }

  render() {
    return (
      <form ref={this.refForm} onSubmit={this.addVal}>
        ....
      </form>
    )
  }
}

export default Searchh

[newhacke]

спасибо !

[newhacke]

А не дает ошибку

this.refForm.current.submit is not a function

class Searchh extends React.Component {

    refForm = React.createRef()

    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 = () => {
        this.refForm.current.submit()
    }

    render() {


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

export default Searchh

[hzzzzl]

newhacke, потому что реф надо привязать к ФОРМЕ, а не к инпуту, у инпута же нет .submit()

[newhacke]

прикол в том, что если я делаю так как ты говоришь, у меня просто перезагружается страница, и не срабатывает функция onSubmit={this.addVal}

При использовании обращения к дом элементу, тупо через клик все работает идеально. Но
же не делается

[newhacke]

еще раз продублирую как ты просил, функция onSubmit(addVal) формы не срабатывает

class Searchh extends React.Component {

    refForm = React.createRef()

    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 = () => {
        this.refForm.current.submit()
    }

    render() {


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

export default Searchh

[newhacke]

плюс происходит перезагрузка страницы

[newhacke]

в итоге решил сам

activeForm = () => {
this.refForm.current.click()
}

render() {

return (

onChange={this.onChange}
placeholder="input search text"
enterButton="Search"
size="large"
onSearch={this.activeForm}
/>


)
}