#9 百分比换算器


  • 0

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

    handleValueChange (event) {
    this.setState({
    value: event.target.value
    })
    this.setState((prevState) => {
    if (this.props.handleValueChange) {
    this.props.handleValueChange(prevState.value);
    }
    })
    }
    render () {
    return (
    <div>
    <input type='number' value={this.state.value} onChange={this.handleValueChange.bind(this)}/>
    </div>
    )
    }
    }

    class PercentageShower extends Component {
    render () {
    const value = (parseFloat(this.props.value) * 100).toFixed(2);
    return (
    <div>{value + '%'}</div>
    )
    }
    }

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

    handleValueChange(inputvalue) {
    this.setState({
    value: inputvalue
    })
    }

    render () {
    return (
    <div>
    <Input handleValueChange={(value) => {this.handleValueChange(value)}}></Input>
    <PercentageShower value={this.state.value}></PercentageShower>
    </div>
    )
    }
    }


  • 0

    class Input extends Component {
    constructor () {
    super();
    this.state = {
    val : ''
    }
    }

    change (e) {
    let num = (e.target.value * 100).toFixed(2)+"%";
    this.setState({
    val : num
    });

    if(this.props.onSubmit)
      this.props.onSubmit(num);
    

    }

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

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

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

    bbbbb (val) {
    this.setState({
    val
    });
    }

    render () {
    return (
    <div>
    <Input onSubmit={this.bbbbb.bind(this)} />
    <PercentageShower aaa={this.state.val} />
    </div>
    )
    }

    }


  • 0

    本地测试通过,但线上提示,不知道哪里出错了,烦请指教,谢谢!
    0_1538988931781_upload-493f925c-b787-482a-b163-b45d576163a5

    class Input extends Component {
        constructor () {
            super()
            this.state = {
                content: ''
            }
        }
    
        handleContentChange (e) {
            const value = e.target.value
            console.log(value)
            this.setState({
                content: value
            })
            if (this.props.onChange) {
                this.props.onChange(value)
            }
        }
    
        render () {
            return (
                <div>
                    <input type="number" onChange={this.handleContentChange.bind(this)} />
                </div>
            )
        }
    }
    
    class PercentageShower extends Component {
        constructor () {
            super()
            this.state = {
                content:'暂无内容'
            }
            this.handleContent = this.handleContent.bind(this);
        }
    
        handleContent(value) {
            let content = ''
            if (value) {
                const str = parseFloat(value).toFixed(3)
    
                content = str.substring(0,str.toString().length - 1) + '%'
            } else {
                content = this.state.content
            }
            return content
        }
    
        render () {
            return (
                <div>
                    输入的内容是:{this.handleContent(this.props.content)}
                </div>
            )
        }
    }
    
    class PercentageApp extends Component {
        constructor () {
            super()
            this.state = {
                content: ''
            }
        }
    
        handleOnInputChange (value) {
            this.setState({
                content: value
            })
        }
    
        render () {
            return (
                <div>
                    <Input onChange={this.handleOnInputChange.bind(this)} />
                    <PercentageShower content={this.state.content} />
                </div>
            )
        }
    }
    
    

  • 0

    class Input extends Component {
      constructor() {
        super()
        this.state = {
          data: 0,
        }
      }
    
      handleInputChange(e) {
        const value = e.target.value
        this.setState({
          data: value,
        })
        if (this.props.onInputChange) {
          this.props.onInputChange(value)
        }
      }
    
      render() {
        return (
          <div>
            <input type="number" onChange={this.handleInputChange.bind(this)} />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      _formatValue(val) {
        return (val * 100).toFixed(2) + "%"
      }
    
      render() {
        return <div>{this._formatValue(this.props.value)}</div>
      }
    }
    
    class PercentageApp extends Component {
      constructor() {
        super()
        this.state = {
          value: 0,
        }
      }
    
      handleInputValue(value) {
        this.setState({
          value,
        })
      }
    
      render() {
        return (
          <div>
            <Input onInputChange={this.handleInputValue.bind(this)} />
            <PercentageShower value={this.state.value} />
          </div>
        )
      }
    }
    

  • 0

    为什么input value不用setState也可以测试通过?

    class Input extends Component {
    constructor(){
    super()
    // this.state={
    // inputNum:0
    // }
    }
    handleOnChange(e){
    if(this.props.onChange){
    this.props.onChange(e.target.value)
    }
    // this.setState({
    // inputNum:e.target.value
    // })
    }
    render () {
    return (
    <div>
    <input type='number' onChange={this.handleOnChange.bind(this)} autoFocus='true' />
    </div>
    )
    }
    }

    class PercentageShower extends Component {
    calculate(inputNum){
    return ((inputNum * 100).toFixed(2) + '%')
    }
    render () {

    return (
      <div>
        {this.calculate(this.props.inputNum)}
      </div>
    )
    

    }
    }

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


  • 0

    class Input extends Component {
    constructor(props) {
    super(props)
    this.state = {
    num: 0
    }
    }
    handleNumberChange(event) {
    if (this.props.onNumberChange) {
    this.props.onNumberChange(event.target.value)
    }
    this.setState({
    num: event.target.value
    })
    }
    render () {
    return (
    <div>
    <input value={this.state.num} onChange={this.handleNumberChange.bind(this)}/>
    </div>
    )
    }
    }

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

    class PercentageApp extends Component {
    constructor(props) {
    super(props)
    this.state = {
    number: ''
    }
    }
    onNumberChange(num) {
    this.setState({
    number: num
    })
    }
    render () {
    return (
    <div>
    <PercentageShower num={this.state.number}/>
    <Input onNumberChange= {this.onNumberChange.bind(this)}/>
    </div>
    )
    }
    }


  • 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 的连接断开,我们正在尝试重连,请耐心等待