爲textInput沒有得到重新渲染時狀態改變

我現在有這個功能，這使得在textInput用不同的佔位符，每種狀態：爲textInput沒有得到重新渲染時狀態改變

_renderSimpleForm =() => { 
    return (
     <View style={styles.simpleContainer}> 
     <TextInput 
      style={[styles.textContentWhite, styles.textContentWhiteHeight, styles.indentLeft]} 
      placeholder={this.state.form.userInput} 
      placeholderTextColor="#B7BEDE" 
      onChangeText={(userInputValue) => 
      //TODO: Saving text to nested userInput is causing problem, temporarily save it to userInputValue 
      //this.setState({form: {...this.state.form, userInput: text}} 
      this.setState({userInputValue} 
      )} 
      //onSubmitEditing={this._submitInfo()} 
     /> 
     <View style={styles.whiteLine}/> 
     </View> 
    ); 
    }

但是以後每次狀態變化，從價值之前的狀態仍然存在於textInput中。我認爲這個textInput會在狀態發生變化時使用新的placeHolder值重新呈現。我在這裏做錯了什麼？

我的狀態對象是如下：

const states = { 
    //TODO: including GPA and coursework 
    schoolForm: { 
    prompt: "Where did you go to school?", 
    userInput: "School name", 
    }, 
    durationForm: { 
    prompt: "For how long?", 
    userInput: "Duration", 
    }, 
    degreeForm: { 
    prompt: "What was your degree?", 
    userInput: "Degree", 
    }, 
    majorForm: { 
    prompt: "What did you study?", 
    userInput: "Major", 
    }, 
} 

export default class NewEducation extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     //form: states.reviewForm, 
     form: states.schoolForm, 
     userInputs: { 
     schoolName: "", 
     duration: "", 
     degree: "", 
     major: "", 
     GPA: "", 
     coursework: "", 
     }, 
     //for testing 
     userInputValue: "", 
    } 
    }

來源

2017-10-04 bleepmeh

你placeholder={this.state.form.userInput}指的是不同的值，更新的狀態onChangeText={(userInputValue) => this.setState({userInputValue})}

試試這個this.setState({form: { ...this.state.form, userInput: userInputValue }})}

你的函數現在應該是這樣的：

<TextInput 
    style={[styles.textContentWhite, styles.textContentWhiteHeight, styles.indentLeft]} 
    placeholder={this.state.form.userInput} 
    placeholderTextColor="#B7BEDE" 
    onChangeText={(userInputValue) => 
    this.setState({form: { ...this.state.form, userInput: userInputValue }})} 
    />

來源

2017-10-04 21:42:23 linasmnew

我剛剛嘗試過你的建議和textInput一旦我開始輸入消失，在控制檯中沒有錯誤信息... – bleepmeh

你的狀態對象是怎樣的？基於您的佔位符代碼，它似乎有這樣的屬性：form：{userInput：''}在這種情況下，它應該工作，因爲我剛測試它 – linasmnew

您好我張貼我的狀態對象上面 – bleepmeh

爲textInput沒有得到重新渲染時狀態改變

回答

相關問題