React：List & Condition Practice

List & Condition Practice

1. 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).
2. Create a new component (=> ValidationComponent) which receives the
   text length as a prop
3. Inside the ValidationComponent, either output “Text too short” or
   “Text long enough” depending on the text length (e.g. take 5 as a
   minimum length)
4. 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).
5. Render a list of CharComponents where each CharComponent receives a
   different letter of the entered text (in the initial input field) as
   a prop.
6. 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>
    );
  }
}