让React组件以DOM组件的方式触发更改事件

我有一个React组件，它包装了一个<input type='text' />，但只有在值更改为有效时调用onChange。（自己的状态允许改变输入的文本价值，但是当它调用onChange，它实际上返回输入的解析值的对象。）让React组件以DOM组件的方式触发更改事件

export default class MyInputClass extends React.Component { 
    constructor(props) { 
     super(props); 

     this.handleChange = this.handleChange.bind(this); 

     this.state = { textValue: '' }; 
     // ... 
    } 

    // ... 

    handleChange(e) { 
     // set the state regardless of value so the input's text changes 
     this.setState({ textValue: e.target.value}); 

     // determine whether the value is valid, and if so, call onChange() 
     let myObj = MyParsedObject.parse(e.target.value); 
     if (myObj !== null && this.props.onChange) { 
      this.props.onChange(myObj); 
     } 
    } 

    render() { 
     return <input onChange={this.handleChange} value={this.state.textValue} />; 
    } 
} 

// ... 

MyInputClass.propTypes = { 
    onChange: React.PropTypes.func 
};

现在我有一个属性onChange，这是一个React.PropTypes.func，并且当输入的更改被触发时，我试图解析输入的值。如果成功，我检查是否this.props.onChange不是null，然后致电onChange(myParsedObject)。

这个工程，但它不感觉没错。 onChange的处理程序应该期望Event参数（或React中的SyntheticEvent），而不是对象。此外，这种模式只允许一个处理程序onChange，而真正的事件可以有多个处理程序。

你好吗假设设计React组件发射真实事件？

来源

2015-06-20 dfoverdx

如果MyInputClass的设计是围绕输入的通用包装，它可能是有意义的调用this.props.onChange与事件，而不是解析的输入，并让父组件确定如何解析它。但是，如果MyInputClass是某个特定输入类型的包装，则传递解析值也可能有意义。你总是可以两者都做，并使其成为API的一个明确部分：

this.props.onChange(e, myObj);

或者使用onChange作为通用处理器和onWhateverChange的分析版本;例如，对于JsonInput组件，您可能会这样做

this.props.onChange(e); 
this.props.onJsonChange(parsedJson);

来源

2015-06-20 23:53:42

它是特定的。其他原生JavaScript事件是否会传递多个参数？ – dfoverdx

@dfoverdx不，但是复合组件常规包装常规HTML元素并提供其他API。只要它是明确的，我不会看到问题。另一种方法是提供您自己的SyntheticEvent /事件值，但我不确定这是多么困难。 –

让React组件以DOM组件的方式触发更改事件

回答

相关问题