gpt4 book ai didi

javascript - 如何从 Material UI 获取 TextField 的输入值?

转载 作者:行者123 更新时间:2023-12-03 07:08:35 25 4
gpt4 key购买 nike

所以,在使用 Material UI 之前,我的代码是这样的。为了实现 ToDo 应用程序的编辑功能,我使用 textarea 中的 ref 来获取当前(默认)值,然后在 save () 方法中保存更新的值(不要担心 editItem 方法,它在另一个组件中,我相信没必要发他,因为问题不存在)

import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';

class ToDoItem extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
}
};

edit = () => {
this.setState ({editMode: true});
};

save = () => {
let updToDo = this.refs.newToDo.value;
this.props.editItem (updToDo);

this.setState ({
editMode: false})
};

renderNormal = () => {
return (
<div className="ToDoItem">
<p className="ToDoItem-Text">{this.props.todo}</p>
<EditButton editHandler={this.edit} />
</div>
);
};

renderEdit = () => {
return (
<div className="ToDoItem">
<textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
<SaveButton saveHandler={this.save} />
</div>
);
};

render() {
if (this.state.editMode) {
return this.renderEdit ();
} else {
return this.renderNormal ();
}
}
}

export default ToDoItem;

所以,现在我尝试从 Material UI 中实现漂亮的 TextField,texarea 标签被删除,下面是代码的相应添加:
<EditToDoField 
ref="newToDo"
defaultToDoValue={this.props.todo}
/>

和 EditToDoField 组件:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: "61px",
},
});

class OutlinedTextFields extends React.Component {

render() {
const { classes } = this.props;

return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-editToDO"
label="Edit ToDo"
defaultValue={this.props.defaultToDoValue}
className={classes.textField}
multiline
margin="normal"
variant="outlined"
/>
</form>
);
}
}

OutlinedTextFields.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedTextFields);

因此,我将当前(默认)值传递给 EditToDoField,但是当我尝试保存更新的 ToDo 文本时,结果中出现了空字段。我知道很可能我只是错过了一些东西,但仍然没有得到什么。我也尝试使用“innerRef”和“inputRef”而不是“ref”,但没有运气。你能帮我解决这个问题吗?

最佳答案

当用户输入文本时添加一个简单的事件处理程序,然后您可以使用回调将输入从文本字段移动到您想要的任何组件,这里是完整的 example

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap'
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: '61px'
}
});

class OutlinedTextFields extends React.Component {
handleOnChange = event => {
console.log('Click');
console.log(event.target.value);
};

render() {
const { classes } = this.props;

return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-editToDO"
label="Edit ToDo"
defaultValue={this.props.defaultToDoValue}
className={classes.textField}
multiline
margin="normal"
variant="outlined"
onChange={this.handleOnChange}
/>
</form>
);
}
}

OutlinedTextFields.propTypes = {
classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);

关于javascript - 如何从 Material UI 获取 TextField 的输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52571256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com