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

登录后回复
 

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