时间戳

首页 > 解决方案 > 控制组件在 React 中的执行

reactjs - 控制组件在 React 中的执行

问题描述

我在 react.js 中工作，我会避免在用户输入一些文本的同时执行 2 个组件，工作流程是这样的：

  1. 用户输入一些文本
  2. 显示文本的长度
  3. 第二个组件验证文本的长度
  4. 第三个组件拆分文本

这是我的源代码：

import React, { Component } from 'react';
import ValidateText from './ValidateText';
import CharText from './CharText.js'
import './hwork02.css';

/* general purpose:
1. Input any text
2. Validate its lenght (min and max)
3. Display each letter as a char
4. if the user clicks on each one, it has to be deleted
class based components
*/
class TextMe extends Component{
    
    state = {
        myText: '',
    }

    updateTxtHandler = (event) => {
        //ejemplo de codigo mala practica y que no es ES6
        this.setState({
            myText: event.target.value,
        });

    }

    render(){   
        return(
            <div className="cajatipo1">
                <h1>Homework02: Text2Chars</h1>
                <div>
                    <h3>Please type any text you want</h3>
                    <input type="text" width="80" placeholder="Type any text greater than 3 characters"
                    value={this.state.myText}
                    onChange={this.updateTxtHandler}
                    />
                    <h3>Using "state" to update this control simultaneously:</h3>
                    <label>{this.state.myText}</label> 
                    <p>
                        <ValidateText myTxtLength={this.state.myText.length} />
                    </p>
                    <p>
                        <CharText text2Char={this.state.myText.split("")} />
                    </p>
                </div>
            </div>    
        )
    }
}

export default TextMe;

我正在处理的问题是如何避免第一次执行 ValidateText 和 CharText ？我希望它们在用户输入文本时运行。所以，任何建议都会很棒。

太感谢了

标签： reactjs

解决方案

您的设计可能有问题（使用 React 组件执行验证感觉很奇怪，一个简单的值检查值应该可以做到，然后您根据返回触发消息），但这里有一个简单的解决方案：不要初始化状态在用户输入任何内容之前。

class TextMe extends Component{

state = {}

updateTxtHandler = (event) => {
    //ejemplo de codigo mala practica y que no es ES6
    this.setState({
        myText: event.target.value,
    });

}

render(){   
    return(
        <div className="cajatipo1">
            <h1>Homework02: Text2Chars</h1>
            <div>
                <h3>Please type any text you want</h3>
                <input type="text" width="80" placeholder="Type any text greater than 3 characters"
                value={this.state.myText || ""}
                onChange={this.updateTxtHandler}
                />
                <h3>Using "state" to update this control simultaneously:</h3>
                <label>{this.state.myText}</label> 
                <p>
                    {this.state.myText && <ValidateText myTxtLength={this.state.myText.length} />}
                </p>
                <p>
                    {this.state.myText &&<CharText text2Char={this.state.myText.split("")} />}
                </p>
            </div>
        </div>    
    )
}
}

请根据您的需要调整条件。

在这里，虽然状态是未定义的，但既不存在<ValidateText/>也不 存在<CharText/>。

推荐阅读