Question

我正在尝试通过handleChange更改模态内部的输入值，并将其放在this.state.value中。不幸的是，我在调试handleChange函数时得到的是：value = undefined（在event.target中没有“value”）。

export default class AddPlanningView extends Component {
constructor(props) {
    super(props);
    this.state = {
        items: [],
        value: "",
        amount: 0,
        unit: ""};

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

handleChange = (event) => {
    this.setState({
        value: event.target.value,
        amount: event.target.amount,
        unit: event.target.unit
    });
}

openModal() {
    this.refs.modal.open()
}

closeModal() {
    this.refs.modal.close()
}

addItem() {
    //Validate Item
    this.closeModal();
}

render() {
    return (
        <Container>
            <Header>
                ...
            </Header>
            <Content>
                ...
                <Modal
                    backdrop={false}
                    ref={"modal"}
                    swipeToClose={true}>
                    <View style={styles.modalView}>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-clipboard" style={{ color: '#0A69FE' }}/>
                                <Input type="text" inlineLabel label="Item" placeholder="Item" value={this.state.value} onChange={this.handleChange}/>
                            </InputGroup>
                        </ListItem>
                        ...
                        <Button block onPress={this.addItem.bind(this)}>
                            <Icon name='save' theme={IconTheme}/>
                        </Button>
                    </View>
                </Modal>
            </Content>
            <Footer>
                <FooterTab>
                    <Button transparent onPress={this.openModal.bind(this)}>
                        <Icon name='md-add'  color="#000"/>
                        New Item
                    </Button>
                </FooterTab>
            </Footer>
        </Container>
    );
}

有谁知道为什么？

由于

戴夫

Answer 1

根据react-native-docs，在react-native中，对于组件中的句柄更改，应使用“ onChangeText”而不是“ onChange”：

$command = new MongoDB\Driver\Command([
    'aggregate' => 'collection',
    'pipeline' => [
        ['$group' => ['_id' => '$y', 'sum' => ['$sum' => '$x']]],
    ],
    'cursor' => new stdClass,
]);
$cursor = $manager->executeCommand('db', $command);

现在该组件的事件处理程序功能中，让我们看一下这个简单的示例：

<customComponent onChangeText={this.handleChange}/>

Answer 2

您将handleChange绑定到this两次。首先在构造函数this.handleChange = this.handleChange.bind(this);中。然后将handleChange声明为箭头函数，该函数还将函数绑定到this。

handleChange = (event) => {
  // stuff
}

解决方案是

从构造函数中删除绑定（推荐）
或
声明handleChange没有胖箭头语法

我建议你阅读处理事件（https://facebook.github.io/react/docs/handling-events.html）作为作业：）

React-Native：处理输入状态变化

2 个答案: