List & Condition Practice
Create an input field (in App component) with a change listener which outputs the length of the entered text below it (e.g. in a paragraph).Create a new component (=> ValidationComponent) which receives the text length as a propInside the ValidationComponent, either output “Text too short” or “Text long enough” depending on the text length (e.g. take 5 as a minimum length)Create another component (=> CharComponent) and style it as an inline box (=> display: inline-block, padding: 16px, text-align: center, margin: 16px, border: 1px solid black).Render a list of CharComponents where each CharComponent receives a different letter of the entered text (in the initial input field) as a prop.When you click a CharComponent, it should be removed from the entered text. Hint: Keep in mind that JavaScript strings are basically arrays!
读取input并显示长度
传入value到input中
import React
from 'react';
const Input= (props
)=>{
return(
<div
>
<input type
="text" onChange
={props
.changed
} value
={props
.text
}/>
<p
>{props
.value
}</p
>
</div
>
);
};
export default Input
;
加入condition判断，并放入return中
let Validation
=null;
if(this.state
.Value
<5&&this.state
.Value
>0){
Validation
= (<p
>{this.state
.Warn
[1]}</p
>);
}else if(this.state
.Value
>=5){
Validation
= (<p
>{this.state
.Warn
[0]}</p
>);
}
return (
<div className
="App">
<ol
>
<Input changed
={event
=>this.ChangedText(event
)}
value
={this.state
.Value
}
text
={this.state
.Text
.join('')}/>
{Validation
}
</div
>
);
将每个字母变成卡片，并设置点击事件
import React
from 'react';
const CharComponent= (props
)=>{
const style
={
display
:'inline-block',
padding
:'16px',
textAlign
:'center',
margin
:'16px',
border
:'1px solid black'
}
return(
<div style
={style
} onClick
={props
.click
}>
{props
.value
}
</div
>
);
};
export default CharComponent
;
state.Text为input.value的split(’’)数组 input.value为state.Text的join(’’)字符串 实现2-way-binding
ChangedText=(event
)=>{
this.setState({Value
:event
.target
.value
.length
,
Text
:event
.target
.value
.split('')});
}
deleteText=(index
)=>{
const Text
=this.state
.Text
;
Text
.splice(index
,1);
this.setState({
Value
:this.state
.Text
.length
,
Text
:Text
});
}
点击事件中，用Text作为中转array，执行map操作，使得可以遍历显示每个字母
let CharComponents
=null;
CharComponents
=(
<div
>
{
this.state
.Text
.map((c
,index
)=>{
return <CharComponent
value
={c
}
click
={this.deleteText
.bind(this,index
)}/>;
})
}
</div
>
);
return (
<div className
="App">
<ol
>
<Input changed
={event
=>this.ChangedText(event
)}
value
={this.state
.Value
}
text
={this.state
.Text
.join('')}/>
{Validation
}
{CharComponents
}
</div
>
);
完整代码
import React
, { Component
} from 'react';
import './App.css';
import Input
from './inputfield/inputfield';
import CharComponent
from './outputfield/outputfiled';
class App extends Component {
state
={
Value
:0,
Text
:[],
Id
:'123213',
Length
:'0',
Warn
:['Text long enogth','Text too short']
}
ChangedText=(event
)=>{
this.setState({Value
:event
.target
.value
.length
,
Text
:event
.target
.value
.split('')});
}
deleteText=(index
)=>{
const Text
=this.state
.Text
;
Text
.splice(index
,1);
this.setState({
Value
:this.state
.Text
.length
,
Text
:Text
});
}
render() {
let Validation
=null;
if(this.state
.Value
<5&&this.state
.Value
>0){
Validation
= (<p
>{this.state
.Warn
[1]}</p
>);
}else if(this.state
.Value
>=5){
Validation
= (<p
>{this.state
.Warn
[0]}</p
>);
}
let CharComponents
=null;
CharComponents
=(
<div
>
{
this.state
.Text
.map((c
,index
)=>{
return <CharComponent
value
={c
}
click
={this.deleteText
.bind(this,index
)}/>;
})
}
</div
>
);
优化state
class App extends Component {
state
={
userinput
:'',
Warn
:['Text long enogth','Text too short']
};
ChangedText=(event
)=>{
this.setState({userinput
:event
.target
.value
});
};
deleteText=(index
)=>{
const Text
=this.state
.userinput
.split('');
Text
.splice(index
,1);
this.setState({
userinput
:Text
.join('')
});
}
render() {
let Validation
=null;
if(this.state
.userinput
.length
<5&&this.state
.userinput
.length
>0){
Validation
= (<p
>{this.state
.Warn
[1]}</p
>);
}else if(this.state
.userinput
.length
>=5){
Validation
= (<p
>{this.state
.Warn
[0]}</p
>);
}
let CharComponents
=null;
CharComponents
=(
<div
>
{
this.state
.userinput
.split('').map((c
,index
)=>{
return <CharComponent
value
={c
}
click
={this.deleteText
.bind(this,index
)}
key
={index
}
/>;
})
}
</div
>
);
return (
<div className
="App">
<ol
>
<Input changed
={event
=>this.ChangedText(event
)}
value
={this.state
.userinput
.length
}
text
={this.state
.userinput
}/>
{Validation
}
{CharComponents
}
</div
>
);
}
}
