#9 百分比换算器


  • 0

    class Input extends Component {
    constructor(){
    super()
    this.state({
    value:""
    })
    }
    changeNumber(event){
    this.setState({
    value:event.target.value
    })
    if(this.props.onSubmit){
    this.props.onSubmit({
    value:this.stete.value
    })
    }

    }
    render () {
    return (
    <div>
    <input type='number' onChange={this.changeNumber().bind(this)}/>
    </div>
    )
    }
    }

    class PercentageShower extends Component {
    render () {
    return (
    <div>{this.props.value}</div>
    )
    }
    }

    class PercentageApp extends Component {
    constructor(){
    super()
    this.state({
    value:''
    })
    }
    getValue(value){
    this.setState({
    value:value
    })
    }
    render () {
    return (
    <div>
    <Input onSubmit={this.getValue().bind(this)}/>
    <PercentageShower value={this.state.value}/>
    </div>
    )
    }
    }


  • 0

    class Input extends Component {
      onNumChange=(e)=>{
        if (this.props.sub) {
          this.props.sub(e.target.value)
        };
      }
      render () {
        return (
          <div>
            <input type='number' onChange={this.onNumChange}/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{(this.props.num*100).toFixed(2)}%</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(props) {
      super(props);
        this.state={
          num:0,
        };
      }
      sub=(num)=>{
        this.setState({num});
      }
      render () {
        return (
          <div>
            <Input sub={this.sub}/>
            <PercentageShower num={this.state.num}/>
          </div>
        )
      }
    }

  • 0

    @enjoyit#9 百分比换算器 中说:

    加删除线的部分,有没有都可以。

    class Input extends Component {
      handleChange(event){
        if(this.props.onSetNum){
          this.props.onSetNum(event.target.value);
        }
      }
      render () {
        return (
          <div>
            <input type='number' onChange={this.handleChange.bind(this)} ~~value={this.props.num}~~/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        let num=this.props.num*100;
        return (
          <div>{num.toFixed(2)+'%'}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super();
        this.state={
          num:0
        }
      }
      handleSetNum(num){
        this.setState({num:num});
      }
      render () {
        return (
          <div>
            <Input onSetNum={this.handleSetNum.bind(this)} ~~num={this.state.num}~~/>
            <PercentageShower num={this.state.num}/>
          </div>
        )
      }
    }
    

  • 0

    class Input extends Component {
        handleChange = (event) =>{
             let percent = event.target.value;
             this.props.setPercent(percent);
        };
        render () {
            return (
                //
                <div>
                    <input
                        type='number'
                        onChange={this.handleChange}
                        value={this.props.percent}
                    />
                </div>
            )
        }
    }
    class PercentageShower extends Component {
        render () {
            return (
                <div>
                    {(parseFloat(this.props.percent)*100).toFixed(2)+'%'}
                </div>
            )
        }
    }
    
    class PercentageApp extends Component {
        constructor(){
            super();
            this.state = {percent:0.00}
        }
        setPercent =(percent)=>{
          this.setState({percent});
        };
        render () {
            return (
                <div>
                    <Input setPercent={this.setPercent} percent={this.state.percent}/>
                    <PercentageShower percent={this.state.percent}/>
                </div>
            )
        }
    }
    

  • 0

    class Input extends React.Component {
      constructor(props){
    	  super(props)
    	  this.state = {
    		  value: ''
    	  }
      }
      handleChange(e) {
    	  this.setState({
    		  value: e.target.value
    	  })
    	  if(this.props.onChange){
    		  this.props.onChange({
    			  value: e.target.value
    		  })
    	  }
      }
      render() {
        return (
          <div>
            <input type='number' onChange = { this.handleChange.bind(this) } value = { this.state.value } />
          </div>
        )
      }
    }
    
    class PercentageShower extends React.Component {
      render () {
        return (
          <div>
            <span>{ this.props.value }</span>
          </div>
        )
      }
    }
    
    class PercentageApp extends React.Component {
      constructor(props){
    	  super(props);
    	  this.state = {
    		  value: ''
    	  }
      }
      handleChange = (e) => {
    		console.log(e)
    		if(!e || !e.value) return
    		this.setState({
    			value: (e.value * 100).toFixed(2) + '%'
    		})
    	}
      render () {
        return (
          <div>
            <Input onChange={ this.handleChange } />
            <PercentageShower value={ this.state.value } />
          </div>
        )
      }
    }
    
    

  • 0

    @辰辰 我也是同样问题,亲测有用,多谢!


  • 0

    class Input extends Component {
      constructor (props) {
        super(props)
        this.state = {
          val : 0
        }
      }
      handlerChange(e) {
        this.setState({
          val : e.target.value
        })
        if(this.props.conversion) {
          this.props.conversion(e.target.value)
        }
      }
      render () {
        return (
          <div>
            <input type='number' 
            value={this.state.val} 
            onChange={this.handlerChange.bind(this)}/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{(this.props.conversion * 100).toFixed(2) + "%"}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor() {
        super()
        this.state = {
          num : 0
        }
      }
      cvs(something) {
        this.setState({
          num : something
        })
      }
      render () {
        return (
          <div>
            <Input conversion = {this.cvs.bind(this)}/>
            <PercentageShower conversion = {this.state.num}/>
          </div>
        )
      }
    }
    

  • 0

    
    class Input extends Component {
      constructor(){
        super();
        this.state = {
          number: ''
        }
      }
      handleNumberChange(event){
        this.setState({
          number:event.target.value
        })
      
        this.props.onChange(event.target.value)
      }
      render () {
        return (
          <div>
            <input type='number' value = {this.state.number} 
              onChange = {this.handleNumberChange.bind(this)}/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{this.props.number}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super();
        this.state = {
          number: ''
        }
      }
      handleChangeNumber(num){
        num= Number(num)*100;
        num=num.toFixed(2)+'%';
        this.setState({
          number:num
        })
        
      }
      render () {
        return (
          <div>
          <Input onChange ={this.handleChangeNumber.bind(this)}/>
          <PercentageShower number = {this.state.number} />
          </div>
        )
      }
    }
    
    
    

  • 0

    class Input extends Component {
    	constructor(props){
    		super(props);
    		this.handleInputChange=this.handleInputChange.bind(this);
    	}
    	handleInputChange (e){
    		this.props.onInputChange(e.target.value);
    	}
      render () {
        return (
          <div>
            <input type='number' value={this.props.value} onChange={this.handleInputChange}/>
          </div>
        )
      }
    }
    class PercentageShower extends Component {
      render () {
        return (
          <div>{this.props.percentValue}%</div>
        )
      }
    }
    class PercentageApp extends Component {
    	constructor(props){
    		super(props);
    		this.state={
    			Inputvalue:''
    		};
    		this.handleInput=this.handleInput.bind(this);
    	}
    	handleInput(Inputvalue){
    		this.setState({Inputvalue:Inputvalue});
    	}
    	render() {
    		const {Inputvalue}=this.state;
    		const percentValue=(Inputvalue*100).toFixed(2)
    		return (
    			<div>
    				<Input value={Inputvalue} onInputChange={this.handleInput}/>
    				<PercentageShower percentValue={percentValue}/>
    			</div>
    		);
    	}
    }
    

  • 0

    <class Num extends Component{
      constructor(){
        super()
        this.state = {
          num:''
        }
      }
      handleNumChange(event){
    
        this.setState({
          num:event.target.value
        })
        if(this.props.setNum){
          const { num } = this.state
          this.props.setNum(event.target.value)
       }
     }
     render(){
        return(
          <div>
            <input type="number" value = {this.state.num} onChange = {this.handleNumChange.bind(this)} />
           </div>
        )
      }
    }
    
    class PercentageShower extends Component {
    
      static defaultProps = {
        inputNum:''
      }
    
      render () {
        //let num = this.props.inputNum  * 100
        return (
        //<div>{num.toFixed(2)+'%'}</div>
        <div>{(this.props.inputNum*100).toFixed(2)}%</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super()
        this.state = {
          num:''
        }
      }
      handleSetNum(count){
        console.log(count);
        this.setState({
          num:count
        })
       }
      render () {
        return (
          <div>
            <Num setNum = {this.handleSetNum.bind(this)} />
            <PercentageShower inputNum = {this.state.num} />
          </div>
        )
      }
    

    }


  • 0

    class Input extends Component {
      static propTypes = {
        onChange: PropTypes.func
      }
      render () {
        return <input type='number' onChange={this.props.onChange}/>
      }
    }
    
    class PercentageShower extends Component {
      static propTypes = {
        number: PropTypes.number
      }
      
      convert(num) {
        return `${(num*100).toFixed(2)}%`
      }
      
      render () {
        return (
          <div>
            <p>{this.convert(this.props.number)}</p>
          </div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super()
        this.state = {
          num : 0
        }
        this.onChange = this.onChange.bind(this)
      }
      
      onChange(event) {
        this.setState({
          num: event.target.value
        })
      }
      
      render () {
        return (
          <div>
            <Input onChange={this.onChange} />
            <PercentageShower number={this.state.num} />
          </div>
        )
      }
    }
    
    

  • 0

    class Input extends Component {

    handleChange(event){
    this.setState({
    value:event.target.value
    })
    }

    render () {
    return (
    <div>
    <input type='number' onChange={this.handleChange.bind(this)}/>
    </div>
    )
    }
    }

    class PercentageShower extends Component {
    render () {

    let num=this.props.val*100;
    return (
      <div>{num.toFixed(2)+'%'}</div>
    )
    

    }
    }

    class PercentageApp extends Component {
    constructor (props) {
    super(props)
    this.state = {
    val: 0
    }
    }
    setNewVal(val){
    this.setState({
    val:this.state.val
    })
    }
    render () {
    return (
    <div>
    <Input onChange={this.setNewVal.bind(this)}/>
    <PercentageShower val = {this.state.val}/>
    </div>
    )
    }
    }应该显示 24.62%, 但你显示的是 0.00%
    为什么


  • 0

    class Input extends Component {
      constructor() {
        super();
        
        this.state = {
          value: ''
        };
      }
      
      render () {
        return (
          <div>
            <input type='number' value={this.state.value} onChange={this.onChange.bind(this)}/>
          </div>
        )
      }
      
      onChange(e) {
        this.setState({
          value: e.target.value
        });
        if (this.props.onChange) {
          this.props.onChange(e.target.value);
        }
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{(this.props.value * 100).toFixed(2)}%</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor() {
        super();
        
        this.state = {
          value: ''
        };
      }
      
      render () {
        return (
          <div>
            <Input onChange={this.onChange.bind(this)} />
            <PercentageShower value={this.state.value} />
          </div>
        )
      }
      
      onChange(value) {
        this.setState({
          value
        });
      }
    }
    
    

  • 0

    真是醉了,第三阶段的阅读,前两天只要10块钱,现在突然就25


  • 0

    class Input extends Component {
      render() {
        const { onChange } = this.props;
        return (
          <div>
            <input onChange={onChange} type="number" />
          </div>
        );
      }
    }
    
    class PercentageShower extends Component {
      render() {
        const { percentNum } = this.props;
        return <div>{percentNum}%</div>;
      }
    }
    
    class PercentageApp extends Component {
      state = {
        iptVal: 0
      };
      onChange(e) {
        this.setState({
          iptVal: e.target.value
        });
      }
      render() {
        const percentNum = (this.state.iptVal * 100).toFixed(2);
        return (
          <div>
            <Input iptVal={this.state.iptVal} onChange={this.onChange.bind(this)} />
            <PercentageShower percentNum={percentNum} />
          </div>
        );
      }
    }
    
    
    
    

  • 0

    0_1526008008005_upload-76fb64cd-32e1-44f4-84b7-5f28b8e09d2e


  • 0

    @Qinhua_Zhao {(this.props.number*100).toFixed(2)}%


  • 0

    class Input extends Component {
    constructor(){
    super()
    this.state={
    number:0
    }
    }

    inputClickHandle(event){
    this.setState(
    {number:event.target.value},
    ()=>{
    if(this.props.onSubmit){
    const {number}=this.state
    this.props.onSubmit({number})

          }
          
        }
      )
    

    }

    render () {
    return (
    <div>
    <input type='number' onChange={this.inputClickHandle.bind(this)} />
    </div>
    )
    }
    }

    class PercentageShower extends Component {
    render () {
    return (
    <div>{(this.props.number*100).toFixed(2)}%</div>
    )
    }
    }

    class PercentageApp extends Component {
    constructor(){
    super()
    this.state={
    number:0
    }
    }
    parmHandle(number){
    this.setState(number)
    }
    render () {
    return (
    <div>
    <Input onSubmit={this.parmHandle.bind(this)} />
    <PercentageShower number={this.state.number} />
    </div>
    )
    }
    }


  • 0

    测试通过!
    class Input extends Component {

    constructor(){
      super();
      this.state = {
        number: 0
      };
    }
    
    handleNumber(event){
      if(this.props.onChange){
        this.props.onChange(event.target.value)
      }
      this.setState({number: event.target.value});
    }
    

    render () {
    return (
    <div>
    <input type='number' value={this.state.number} onChange={this.handleNumber.bind(this)} />
    </div>
    )
    }
    }

    class PercentageShower extends Component {

    render () {
    return (
    <div>
    {(this.props.number* 100).toFixed(2) + '%' }
    </div>
    )
    }
    }

    class PercentageApp extends Component {
    constructor(){
    super();
    this.state = {
    number: 0
    };
    }

    passNumber(inputNum){
    this.setState({
    number: inputNum
    })
    }

    render () {
    return (
    <div>
    <Input onChange={this.passNumber.bind(this)} />
    <PercentageShower number={this.state.number} />
    </div>
    )
    }
    }


  • 0

    @summerwait 感觉这么写之后,做回填功能的时候可能还得再重新处理一下这个数值。就应该在需要的组件中按需求处理原始数据


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待