reactjs - 如何在 Cleave JS 中使用值反应

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' 属性，代码工作正常。但是我需要使用值，因为我需要格式化方式的道具的初始值。

在这种情况下，我应该怎么做才能从 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}
    />
}

}