Question

我有一个组件，它返回从其他库导入的<TextInput />。 TextInput有一个onChange道具，它带有一个函数function(value) { // do something with value}。那么如何用value创建一个observable并在任何地方使用那个observable？

import TextInput from 'otherLibrary';
import Rx from 'rxjs/Rx';

export default class MyComponent extends PureComponent {

    handleTextChange = (value) => {
        this.observable = Rx.observable.from(value).do(() => console.log(value))
        // how to make an observable with `value`? If i just make it like this, every time input a letter in the TextInput will make a new observable, that's not correct.
    }
    render() {

        return (

                    <TextInput
                        defaultValue=""
                        onChange={this.handleTextChange}
                    />

        );
    }
}

Answer 1

如果您的组件是反应组件，则在onChange中您可以使用

将其存储在组件的状态中

this.setState({textInputValue: value})

（要获得正确的信息，您需要将onchange回调更改为以下内容：）

<TextInput
        defaultValue=""
        onChange={this.handleTextChange.bind(this)}
/>

现在，只要该状态发生变化，例如，将该状态作为道具传递给另一个组件，该组件就会重新渲染。

如果我没记错的话，要从textinput中获取实际值，你应该使用value.target.value，并可能将value参数重命名为其他内容以避免混淆，例如

handleChange = (e) => {..

value= e.target.value

如何与其他图书馆做出反应

1 个答案: