React js, тип ввода onclick - PullRequest
       15

React js, тип ввода onclick

0 голосов
/ 17 февраля 2020

Привет, ребята, я просто хочу знать, если

<input type="text" onClick={this.state}>
<h2> once i click the text box some of my div will show a "typing" then if not click the text the concept will be none *this is just a sample sorry guys if too messy my question</h2>

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

если я правильно понял, вы хотите отобразить слово «Набор текста», как только вы нажмете на div. Я думаю, что это поможет вам

import React from "react";

export default class Typing extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            yourStateName: ""
        }
        this.onChangeState = this.onChangeState.bind(this);
    }

    onChangeState(e) {
        this.setState({
            yourStateName: "Typing"
        })
    }

    render() {
        const {yourStateName} = this.state;
        return (
            <div>
                <input type="text" onClick={e => this.onChangeState(e)}>
                value: {yourStateName}
            <div/>
        )
    }
}
0 голосов
/ 17 февраля 2020

Хотя ваш вопрос действительно беспорядочный, вот пример кода для вас. Возможно, это укажет вам правильное направление.

import React from "react";

export default class Test extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            someState: ""
        }
        this.onChangeState = this.onChangeState.bind(this);
    }

    onChangeState(e) {
        this.setState({
            someState: //logic here
        })
    }

    render() {
        const {someState} = this.state;
        return (
            <>
                <input type="text" onClick={e => this.onChangeState(e)}>
                State value: {someState}
            </>
        )
    }
}

Каждый раз, когда вы нажимаете выбранный div, вы вызываете метод onChangeState , где вы можете манипулировать своим состоянием. Не забывайте, что каждое обновление состояния вызывает рендеринг. Для получения дополнительной информации посетите Официальные документы React .

...