Question

我想为TextInput设置onChangeText函数，TextInput是数组的子元素，但是我得到的未定义不是函数（评估＆＃39; _this2.props.updatePhoneNumber（text）＆＃ 39）＆＃39;

我不确定哪个部分我做错了所以我只是在这里粘贴我的代码。子项目部分：

class PhoneInput extends React.Component {    
   render() {
       return ( <FormGroup style={{flexDirection: 'row'}}>
            <TextInput placeHolder="phone" value={this.props.phone.number} 
                onChangeText={(text) => {this.props.updatePhoneNumber(text)}}/>
        </FormGroup>);
   }
}

父亲组成部分：

export class RecommendScreen extends React.Component {
    state = {
        phones: [{number: "", id: 1}, {number: "", id: 2}]
    }
    constructor(props) {
        super(props);
        this.updatePhoneNumber = this.updatePhoneNumber.bind(this);
    }
    updatePhoneNumber(id, number) {
        const phones = this.state.phones.slice();
        for (let phone of phones) {
            if (phone.id == id) {
               phone.number = number;
            }
        }
        this.setState({phones: phones});
    }
    render() {
        return (
            <Screen styleName="paper">
                {this.state.phones.map((phone, i) => (
                    <PhoneInput phone={phone} key={phone.id}
                        onChangeNumber={(text) => {this.updatePhoneNumber(phone.id, text)}}
                    />
                ))}
            </Screen>
        );
    }
}

有什么想法吗？

Answer 1

在第一行中，您只需将该函数传递给子组件。

        export class RecommendScreen extends React.Component {
            state = {
                phones: [
                    {
                        number: "",
                        id: 1
                    }, {
                        number: "",
                        id: 2
                    }
                ]
            }
            constructor(props) {
                super(props);
                this.updatePhoneNumber = this.updatePhoneNumber.bind(this);
            }
            updatePhoneNumber(id, number) {
                const phones = this.state.phones.slice();
                for (let phone of phones) {
                    if (phone.id == id) {
                        phone.number = number;
                    }
                }
                this.setState({phones: phones});
            }
            render() {
                return (
                    <Screen styleName="paper">
                        {this.state.phones.map((phone, i) => (<PhoneInput
                                phone={phone}
                                key={phone.id}
                                updatePhoneNumber={this.updatePhoneNumber}/>))}
                    </Screen>
                );
            }
        }

在此组件中，只需调用此函数并将值传递给它

        class PhoneInput extends React.Component {
            render() {
                return (
                    <FormGroup style={{
                        flexDirection: 'row'
                    }}>
                        <TextInput
                            placeHolder="phone"
                            value={this.props.phone.number}
                            onChange={(e) => {this.props.updatePhoneNumber(e.target.value)
                        }}/>
                    </FormGroup>
                );
            }
        }

Answer 2

这是一个名称不匹配的问题，您正在使用不同的名称使用不同的名称传递该功能，来自您通过onChangeNumber的父母，以及您正在使用updatePhoneNumber的儿童，{＆＃39}为什么它会抛出错误。

使用此：

<PhoneInput 
    phone={phone} 
    key={phone.id} 
    updatePhoneNumber = {(text) => this.updatePhoneNumber(phone.id, text)}}
/>

或者内部子组件使用onChangeNumber，如下所示：

<TextInput 
     placeHolder = "phone" 
     value = {this.props.phone.number} 
     onChangeText={(text) => this.props.onChangeNumber(text)}/>

在React中更改数组项的文本：undefined不是函数

2 个答案: