React навесить событие на эллементы, которые пришли с сервера

Question

Уже долгое время не получается навесить событие на эллементы, которые пришли с сервера. В моем случае это 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>
    );
}

Answer 1

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']
});

https://codepen.io/latdev/pen/XWeeVWG

БЛОГ НА HUSL

React навесить событие на эллементы, которые пришли с сервера

Ответы (1 шт):