反应原生:使用状态处理输入的变化

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 文档，你应该使用 onChangeText 而不是 onChange 来更改组件中的句柄：

<customComponent onChangeText={this.handleChange}/>

现在在handleChange处理程序函数中：

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

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）作为家庭作业:)