#9 百分比换算器


  • 0

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


  • 0

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

  • 0

    class Input extends Component {

    constructor (){
    super()
    this.state={
    number:0
    }
    }

    handleNumberChage(event){
      this.setState({number: event.target.value})
      if (this.props.onChange) {
       const {number}=this.state;
       this.props.onChange({number});
      }
    

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

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

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

    handlePercentage(number){
    var out = new Number(number);
    out = number*100;
    out = out.toFixed(2);
    this.setState({ percentage: out });
    }

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

    请问这个错在哪里了


  • 0

    虽然写的很渣,但是我很想 在子组件里 将数据转为 百分百,而不是在父组件里进行修改,类似vue里的 过滤器,我相信react中肯定也有,只是目前我还不知道

    class Input extends Component {
      constructor () {
        super()
        this.state = {
          num: ''
        }
      }
      
      changeNum (e) {
        const val = e.target.value
        this.setState({
          num: val
        })
        
        if (this.props.onSubmit) {
            this.props.onSubmit(val)
        }
      }
      
      render () {
        return (
          <div>
            <input type='number' value={this.state.num } onChange={this.changeNum.bind(this)}/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{this.props.num}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor () {
        super()
        
        this.state = {
          num: ''
        }
      }
      handlerNum (val) {
        let num = (parseFloat(val)*100).toFixed(2)
        let str = num + '%'
        this.setState({
          num: str
        })
      }
      
      render () {
        return (
          <div>
            <Input onSubmit={this.handlerNum.bind(this)}/>
            <PercentageShower num={this.state.num}/>
          </div>
        )
      }
    }
    
    

  • 1

    一次通过

    class Input extends Component {
      handleInputChange (event) {
        let value = event.target.value
        if (this.props.onChange) {
          this.props.onChange(value)
        }
      }
      render () {
        return (
          <div>
            <input type='number' value={this.props.num} onChange={this.handleInputChange.bind(this)} />
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      _handleNum () {
        let n = Number(this.props.num)
        n = Math.round(n * 10000) / 100 + ''
        let pointIndex = n.indexOf('.')
        if (pointIndex > 0) {
          let l = 2 - n.slice(pointIndex + 1).length
          if (l == 1) {
            n = n + '0'
          }
        } else {
          n = n + '.00'
        }
        return n + '%'
      }
      render () {
        return (
          <div>
            {this._handleNum()}
          </div>
        )
      }
    }
    
    class PercentageApp extends Component {
      handleInputChange (num) {
        console.log(num)
        this.setState({
          n: num
        })
      }
      constructor () {
        super()
        this.state = {
          n: 0.1
        }
      }
      render () {
        return (
          <div>
            <Input num={this.state.n} onChange={this.handleInputChange.bind(this)} />
            <PercentageShower num={this.state.n} />
          </div>
        )
      }
    }
    

  • 0

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

  • 0

    参考代码:

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

  • 0

    为什么我总觉得我写的有点奇怪。。。看了大家的讨论,都不一样。
    class Input extends Component {
    constructor(props){
    super(props);
    this.state={
    val:''
    };
    this.fn=this.fn.bind(this);
    }
    fn(e){
    this.setState({
    val:e.target.value
    });
    this.props.mydata({'val':e.target.value})
    }
    render () {
    return (
    <div>
    <input type='text' onChange={this.fn} value={this.state.val} />
    </div>
    )
    }
    }

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

    class PercentageApp extends Component {
    constructor(props){
    super(props);
    this.state={
    perdata:''
    };
    this.fn2=this.fn2.bind(this);
    }
    fn2(item){
    this.setState({
    perdata:parseFloat(item.val*100).toFixed(2)+'%'
    })
    console.log(item);
    }
    render () {
    return (
    <div>
    <Input mydata={this.fn2} />
    <PercentageShower perdata={this.state.perdata} />
    </div>
    )
    }
    }


  • 0

    class Input extends Component {
      constructor () {
        super()
        this.state = {
          num: ''
        }
      }
      percentNum (e) {
        let res = parseFloat(e.target.value)
        res = res * 100
        res = res.toFixed(2)
        res = res.toString() + '%'
        this.props.getNum(res)
      }
      render () {
        return (
          <div>
            <input type='number' onChange={this.percentNum.bind(this)}/>
          </div>
        )
      }
    }
    
    class PercentageShower extends Component {
      render () {
        return (
          <div>{this.props.percentNum}</div>
        )
      }
    }
    
    class PercentageApp extends Component {
      constructor () {
        super()
        this.state = {
          num: ''
        }
      }
      getNum (res) {
        this.setState({num: res})
      }
      render () {
        return (
          <div>
            <Input getNum={this.getNum.bind(this)}/>
            <PercentageShower percentNum={this.state.num}/>
          </div>
        )
      }
    }
    
    

  • 0

    @Sinosaurus 肯定可以在子组件啊,在触发Change事件的函数里就开始转换百分比,然后传给父组件


  • 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>
        )
      }
    }
    
    

登录后回复
 

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