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

我想为一个TextInput设置onChangeText函数，该函数是数组的子元素，但是我得到'undefined不是函数（计算'_this2.props .updatePhoneNumber（text）'）'更改React中数组项的文本：undefined不是函数

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

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> 
     ); 
    } 
}

任何想法？

来源

2017-05-05 meteoriteliu

，'updatePhoneNumber'不是道具。 'onChangeNumber'是，但它没有被定义。 – Dez

@Dez感谢您的快速回复。你是对的，一个愚蠢的错误。 'this.props.updatePhoneNumber'应该是'this.props.onChangeNumber' – meteoriteliu

它的名称不匹配的问题，您是通过不同的名称使用不同的名称传递的功能，从家长，你正在通过onChangeNumber和您正在使用updatePhoneNumber的孩子，这就是为什么它会抛出错误。

使用此：

<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)}/>

在`PhoneInput`

来源

2017-05-05 10:03:24

谢谢，你是非常有帮助的。 – meteoriteliu

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

 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> 
       ); 
      } 
     }

来源

2017-05-05 10:00:26

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

回答

相关问题