#9 百分比换算器


  • 0

    改了好久。。。。。终于过了

    class Input extends Component {
      render () {
        return (
          <div>
            <input type='number' />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div></div>
        )
      }
    }
    
    class PercentageApp extends Component {
      render () {
        return (
          <div></div>
        )
      }
    }
    

  • 0

    class Input extends Component {
      constructor() {
        super()
        this.state = {
          inputNumber: 0
        }
      }
      handleInput = (event) => {
        this.setState({
          inputNumber: event.target.value
        })
        this.props.onInputChange(event.target.value)
      }
      render () {
        return (
          <div>
            <input 
              type='number' 
              value={this.state.inputNumber} 
              onChange={this.handleInput}
            />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{`${(this.props.inputNumber*100).toFixed(2)}%`}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super()
        this.state = {
          inputNumber: 0
        }
      }
      handleOnInputChange = (inputNumber) => {
        this.setState({
          inputNumber
        })
      }
      render () {
        return (
          <div>
            <Input onInputChange={this.handleOnInputChange}/>
            <PercentageShower inputNumber={this.state.inputNumber}/>
          </div>
        )
      }
    }
    

  • 0

    @wangxf 同样的报错,我把onInput 改成onChange 就通过了,感觉题目有问题。。


  • 0

    class Input extends Component {
      defaultProps = {
        val: 0
      }
      
      changeVal (event) {
        this.props.conversion(event.target.value);
      }
    
      render () {
        const val = this.props.val;
        return (
          <div>
            <input type='number' value={val} onChange={this.changeVal.bind(this)}/>
          </div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor () {
        super();
        this.state = {
          val: 0
        }
      }
      
      conversion (val) {
        this.setState({
          val
        })
      }
      
      render () {
        const val = this.state.val
        return (
          <div>
            <Input val={val} conversion={this.conversion.bind(this)} />
            <PercentageShower val={val} />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      defaultProps = {
        val: 0
      }
    
      render () {
        const val = this.props.val;
        const percentage = `${(val * 100).toFixed(2)}%`
        return (
          <div>{percentage}</div>
        )
      }
    }
    
    

  • 0

    class Input extends Component {
        changeHandle(event){
            this.props.inputValue(event.target.value)
        }
        render () {
          return (
            <div>
              <input type='number' onChange={this.changeHandle.bind(this)} />
            </div>
          )
        }
      }
      
      class PercentageShower extends Component {
          static defaultProps={
            Value:0
          }
        render () {
          return (
            <div>{this.props.Value+'%'}</div>
          )
        }
      }
      
      class PercentageApp extends Component {
        constructor(){
            super()
            this.state={
                value:0
            }
        }
        inputValue(value){
            this.setState({
                value:(value * 100).toFixed(2)
            })
        }
        render () {
          return (
            <div>
              <Input inputValue={mode=>this.inputValue(mode)}/>
              <PercentageShower Value={this.state.value}/>
            </div>
          )
        }
      }
    
    

  • 0

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

  • 0

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

  • 0

    class Input extends Component {
    
        onChangeNumber(e){
            if(this.props.onMyChange){
                this.props.onMyChange(e.target.value);
            }   
        }
        render () {
          return (
            <div>
              <input type='number'  onChange={this.onChangeNumber.bind(this)} />
            </div>
          )
        }
      }
      
      class PercentageShower extends Component {
        render () {
          return (
            <div>
               {this.props.percent} 
            </div>
          )
        }
      }
    
      function toPercent(point){
          var percent = Number(point*100).toFixed(2);
          percent+="%";
          return percent;
      }
      
      class PercentageApp extends Component {
    
        state={
            percent:'0.00%'
        }
    
        handleOnMyChange(number){
            console.log(number)
            console.log(toPercent(number))
            this.setState({
                percent:toPercent(number)
            })
        }
    
        render () {
          return (
            <div>
                <Input onMyChange={this.handleOnMyChange.bind(this)}/>
                <PercentageShower percent={this.state.percent}/>
            </div>
          )
        }
      }
    

  • 0

    打个卡

    class Input extends Component {
      handleInput(event){
        this.props.number(event.target.value);
      }
      render () {
        return (
          <div>
            <input type='number' onChange = {this.handleInput.bind(this)} />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        let percentage = this.props.percentage;
        percentage = `${(100 * percentage).toFixed(2)}%`;
        return (
          <div>{percentage}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super();
        this.state = {number: null};
      }
      getInput(value){
        this.setState({number: value});
      }
      render () {
        return (
          <div> 
            <Input number = {this.getInput.bind(this)}/> 
            <PercentageShower percentage = {this.state.number}/> 
          </div>
        )
      }
    }
    

  • 0

    感觉自己写的好长 啊

    class Input extends Component {
      constructor(){
        super()
        this.state = {
          val : 1
        }
      }
      
      render () {
        return (
          <div>
            <input value = {this.state.val} onChange = {this.handleC.bind(this)} type='number' />
          </div>
        )
      }
      
      handleC(event){
        this.setState({
          val:event.target.value
        })
        this.props.onChan(event.target.value);
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{this.toPercent(this.props.num)}</div>
        )
      }
      
        toPercent(point){
        var str=Number(point*100).toFixed(2);
        str+="%";
        return str;
    }
    }
    
    class PercentageApp extends Component {
      constructor(){
        super()
        this.state = {
          value : 1
        }
      }
    
     
        
        handleChange(val){
          this.setState({
            value : val
          })
        }
        
      render () {
        return (
          <div>
            <Input onChan = {this.handleChange.bind(this)}/>
            <PercentageShower num = {this.state.value}/>
          </div>
        )
       
      }
    }
    
    

  • 0


  • 0

    class Input extends Component {
      handleInputChange(event) {
        if(this.props.inputChange) {
          this.props.inputChange(event.target.value)
        }
      }
      
      render () {
        return (
          <div>
            <input type='number' onChange={this.handleInputChange.bind(this)} />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      static defaultProps = {
        number: 0  
      }
      
      render () {
        return (
          <div>{(this.props.number * 100).toFixed(2) + '%'}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor() {
        super()
        this.state = {
          number: 0
        }
      }
      
      handleInput(number) {
        this.setState({
          number: number
        })
      }
      
      render () {
        return (
          <div>
            <Input inputChange={this.handleInput.bind(this)} />
            <PercentageShower number={this.state.number} />
          </div>
        )
      }
    }
    

登录后回复
 

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