我如何在 Cleave JS react 中使用值

Question

我想将 Cleave js 用于货币格式。 我的 Cleave 标签如下所示：

<Cleave className="input-numeral" 
        name="loanAmount"
        options={{  numeral:            true,
                    numeralDecimalMark: ',',
                    delimiter:          '.' 
                }}
        value={this.props.loanAmount} 
        onChange={this.props.handleChange}
 />

假设输入是 82456.56

我想要输出这样的东西：82.456,56。 如果我不使用 'value' 道具，代码工作正常。 但是我需要使用 value，因为我需要格式化的 props 的初始值。

在这种情况下，我应该怎么做才能最初从 props 读取值，然后根据用户输入更改它？

Answer 1

你可能想尝试这样的事情：

class SampleComponent extends React.Component{
  constructor(props){
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
        value : props.loanAmount
    };
}

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

render() {
    return <Cleave className="input-numeral" 
            name="loanAmount"
            options={{  numeral:            true,
                        numeralDecimalMark: ',',
                        delimiter:          '.' 
                    }}
            value={this.state.value} 
            onChange={this.onChange}
    />
}

}