Ответы пользователя по тегу React
  • Redux Field почему не срабатывает onChange?

    glem1337
    @glem1337 Автор вопроса
    Нашел в чем проблема. FileInput который рендерился Field-ом через указание {...props.input} устанавливал value для поля, а этого делать нельзя. Нужно переделать вот так:
    export class FileInput extends Component {
    
        onChange = e => { 
            e.preventDefault();
            const { input: { onChange } } = this.props;
            onChange(e.target.files[0]);
        };
    
        render() {
    
            let {meta: {touched, error}, input: {value}, ...props} = this.props; // достаем value из props.input
    
            return (
                <>
                    <Form.File
                        custom
                        {...props.input}
                        id={props.id}
                        className={props.className}
                        label={props.label}
                        onChange={this.onChange}
                        type={props.type}
                        accept={props.accept}
                    />
                    {touched && error && (
                        <Form.Text className="form__error form__text">
                            {error}
                        </Form.Text>
                    )}
                </>
            )
        }
    };
    Ответ написан
    Комментировать
  • React как тебя заставить при нажатии на дочерний элемент не отрабатывать onClick родительского?

    glem1337
    @glem1337
    При клике на одном из узлов DOM, событие click "всплывает" вверх по дереву до тех пор пока не достигнет корня или не будет отменено в явном виде.

    React передает в обработчик события "синтетический" объект события, который, помимо прочего имеет метод stopPropagate. Этот метод (как и его нативный аналог) останавливает дальнейшее "всплытие" события вверх по дереву DOM. Вот как можно использовать этот метод на практике:

    var Block = React.createClass({
        handleClose: function(e) {
            e.stopPropagation();
            alert('close');
        },
        handleClick: function(e) {
            alert('click');
        },
        render: function() {
            return (
                <div onClick={this.handleClick}>
                    <span>Foo Bar Baz</span>
                    <span onClick={this.handleClose}> &#215;</span>
                </div>
            );
        }
    });


    Проще говоря вам надо применить e.stopPropagation(); при клике на нужный вам элемент(лайк)
    Ссылка на вопрос на stackoverflow: https://ru.stackoverflow.com/questions/537267/reac...
    Ответ написан
    3 комментария