Control Components' execution in React
I'm working in react.js, I would to avoid the execution of 2 components meanwhile the user input some text, the workflow is like this:
- the user enter some text
- the text's length is displayed
- A second component validate text's length
- A third component split the text
This is my sourcecode:
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;
The problem I'm dealing with is how to avoid the execution of ValidateText and CharText for the first time? I would like they are running when the user is typing text. So, any suggestions will be awesome.
Thank you so much
from Recent Questions - Stack Overflow https://ift.tt/3tSJrIw
https://ift.tt/eA8V8J
Comments
Post a Comment