【发布时间】:2016-03-29 21:31:54
【问题描述】:
我正在尝试从 ListView 组件中的 TextInput onChange 事件更新 redux 状态。就我而言,我正在显示比率列表。我想将编辑后的比率解析为其两个值。但是,传递给setItem 方法的text 值不是我预期的字符串,但它似乎是一个Text 或TextInput 对象。
editItem 是一个 redux 操作,它对 redux 状态执行编辑。
如何获取输入字符串值以便将其传递给操作?
class DataList extends Component {
constructor(props) {
super(props);
// Bind the function so we can use it on onPress event
this.renderRow = this.renderRow.bind(this);
const { data } = this.props.currentData;
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
})
}
render() {
// Keep dataSource up to date with redux state
const { data } = this.props.currentData;
const dataSource = this.dataSource.cloneWithRows(data.list);
return (
<View>
<ListView
dataSource={dataSource}
renderRow={this.renderRow}
renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
style={[styles.list, {height: windowDims.height}]}
initialListSize={1}
/>
</View>
)
}
setItem(index, text) {
console.log (index + "; [" + text + "]")
console.log (text) // Prints out what looks like a Text or TextInput object
var { data } = this.props.currentData;
var numerator = parseInt (text.substring (0, text.indexOf('/'))) // Fails as it does not find a string
var denominator = parseInt (text.substring (text.indexOf('/')+1))
this.props.dispatch(editItem(index, { numerator: numerator, denominator: denominator }));
}
renderRow(rowData, sectionID, rowID) {
return (
<View style={styles.rowContainer}>
<TextInput
style={styles.textInput}
keyboardType={'numeric'}
onChange={(text) => this.setItem(rowID, text)}
value={rowData.numerator + "/" + rowData.denominator}
/>
</View>
);
}
}
【问题讨论】:
标签: javascript react-native redux