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

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

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

render() {

return (

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


)
}

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

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

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

еще раз продублирую как ты просил, функция 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

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

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

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

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

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

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

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

спасибо!

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

спасибо !

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

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

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

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

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

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

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

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

Осилит ли такой проект PUG?

Алекс Глебов, почитал про tars именно то что нужно спасибо

Осилит ли такой проект PUG?

Игорь, я просто не понимаю честно. У меня в голове типо такого

let box = {
name: '123',
age: '123',
page: '123',
mage: '123',
}

mixin ggg(box)
.div box.name
.div box.age
.div box.page
.div box.mage

____________________

+ggg(box)

Осилит ли такой проект PUG?

Алексей, да я понимаю как вставить 1 2 3 5 переменных, а как вставить 100 переменных?
и каждую переменную вставить туда куда нужно

Осилит ли такой проект PUG?

ну и ваше мнение, как лучше сделать на реакте или без?

Осилит ли такой проект PUG?

я не до коцна понимаю, в каком файле создавать обьект, в js файле или в pug?
Блин как бы обьяснить, можете в песочнице кинуть пример того как в разметку с паг вставить обьект с 10 и более свойствами

Пытаюсь закостылить плавно появляющеся меню, как это сделать?

То есть получается мы делаем клона самого меню??

Пытаюсь закостылить плавно появляющеся меню, как это сделать?

как просто!!!! Я костылили как мог что бы не было багов а тут..) Спасибо отдуши))

Pеально ли сделать слайдер с текстом в соседнем блоке?

спасибо круто)

Как решается проблема с дерганьем всего контента при открытии модального окна?

спасибо друг ну да выражение в ногу себе самому выстрелить это про меня))

Как решается проблема с дерганьем всего контента при открытии модального окна?

тем более мне надо для меню) так и так лезть в дебри придется бутстрапа, поэтому лучше как то без бутстрапа)