0

Уже долгое время не получается навесить событие на эллементы, которые пришли с сервера. В моем случае это input, которым на onChange надо вызывать функцию handleInputChange. Как правильно решить такую задачу?

function InputForm() {

    const [fields, setFields] = useState({});
    
    // FORM пришел с сервера в таком виде
    const form = [
        `<p>Введите имя: <input name="1" type="text"> !</p>`,
        '<p>Введите Email: <input name="2" type="text"> !</p>'
    ]

    const handleInputChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        setFields({...fields, [name]: value});
    };

    return (
        <div>
            {form.map((el, index) => {
                return (
                    <div>
                        {parse(`${el}`)}
                    </div>
                )
            })}

        </div>
    );
}
2
  • Правильно — не таскать голый html с сервера.
    – Alexey Ten
    23 дек 2021 в 6:46
  • Форм может быть таких много. Поэтому задача написать компонент, который будет обрабатывать их.
    – KolinW
    23 дек 2021 в 6:48

1 ответ 1

2

React это тебе не HTML, это скомпилированный ReactDOM объект!!!

<>
<p>Введите имя: <input name="1" type="text" onChange={event => handleInputChange(event)} /> !</p>
<p>Введите Email: <input name="2" type="text" onChange={event => handleInputChange(event)} /> !</p>
</>

По факту твой скомпилированный React объект будет выглядеть вот так.

React.createElement(React.Fragment, null,
    React.createElement("p", null,
        "Введите имя: ",
        React.createElement("input", { name: "1", type: "text", onChange: event => handleInputChange(event) }),
        " !"),
    React.createElement("p", null,
        "Введите Email: ",
        React.createElement("input", { name: "2", type: "text", onChange: event => handleInputChange(event) }),
        " !"));

Если передашь его в качестве JS, то и рендерится он будет нормально как обычный ReactDOM объект.

Если уж совсем уписаться как нужно использовать React из строки. То можно использовать @babel/standalone компилятор https://babeljs.io/docs/en/babel-standalone

И тогда Children загружаешь уже как text/babel используя браузерную версию бабела.

var result = babel.transform(code, {
    presets: ['es2015']
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.