0

Никак не могу из одного файла поменять статус в другом, пытался отправлять <Smallblock terms='1212' />, но в console.log(this.props) не приходит

Вот код:

send:

import React, {Component} from 'react';
import Smallblock from './Smallblock';
import '../css/sendpost.css';


class Sendpost extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ""
        }
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({text: ""});
        <Smallblock terms='1212' />
    }

    handleTextChange(event) {
        this.setState({text: event.target.value});
    }

    render() {      
        return (
            <div className="form_input">
                <form onSubmit={this.handleSubmit}>
                    <input type='text' className="inputtext" placeholder="Что у вас нового?" value={this.state.text} onChange={this.handleTextChange} />
                    <button>Send</button>
                </form>
            </div>
        );
    }
}

export default Sendpost;

Smallblock:

import React, {Component} from 'react';
import '../css/smallblock.css';


class Smallblock extends Component {

    constructor(props) {
        super(props);
        console.log(this.props);
        alert(this.props);
        this.state = {
            count: "1"
        }
    }

    render() {
        return (
            <div className="smallblock">
                <div className="count">{this.state.count}</div>
                <div className="text">Записей</div>
            </div>
        );
    }
}

export default Smallblock;

1 ответ 1

0

Так и ничего не будет приходить так как там есть несколько ошибок.

1.Надо {this.props.terms} ведь такое свойство стоит у компонента (это не совсем ошибка )

 <Smallblock terms='1212' />

2.Компонент внутри функции не будет рабочим его надо возвращать и использовать как JSX компонент.Я написал его после формы в компоненте Sendpost

Полный рабочий код.

Ссылка на codesandbox

Sendpost

class Sendpost extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ""
        }
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({text: ""});

    }

    handleTextChange(event) {
        this.setState({text: event.target.value});
    }

    render() {      
        return (
            <div className="form_input">
                <form onSubmit={this.handleSubmit}>
                    <input type='text' className="inputtext" placeholder="Что у вас нового?" value={this.state.text} onChange={this.handleTextChange} />
                    <button>Send</button>
                </form>
                <Smallblock terms='1212' />
            </div>
        );
    }
}

export default Sendpost;

Smallblock

class Smallblock extends Component {

    constructor(props) {
        super(props);
        console.log(this.props.terms);
        this.state = {
            count: "1"
        }
    }

    render() {
        return (
            <div className="smallblock">
                <div className="count">{this.state.count}</div>
                <div className="text">Записей</div>
            </div>
        );
    }
}

Ваш ответ

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

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