react-native - React-Native:处理状态的输入更改

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”:

<customComponent onChangeText={this.handleChange}/>

现在在此组件的事件处理函数中，让我们看一下这个简单的示例:

handleChange = (textValue)=>{
    this.setState({value: textValue})
}