Question

你好，我想知道是否

<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>

Answer 1

尽管您的问题确实很麻烦，但这是适合您的示例代码。也许它将为您指明正确的方向。

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 方法，您可以在其中操纵状态。不要忘记，每个状态更新都会导致重新渲染。有关更多信息，请访问official React docs。

Answer 2

如果我正确理解，则想在单击div后显示“ Typing”一词。我认为这对您有帮助

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/>
        )
    }
}

React js，输入类型为onclick

2 个答案: