我有5个名称,单击它们后,它们将转换为带有保存按钮的输入。单击“保存”后,输入和保存消失,并且旧的div应该显示为更新的输入值。我无法使用输入值更新旧的div。请帮忙。
现在,我要单击“保存”,并使用更新后的输入值将原始div放回原处。我快结束了,但被卡住了。
最初看起来像这样:
在单击div时,它看起来像这样:
请帮助并给出详细的解释,以便我下次可以了解如何进行操作。
父组件
state = {
showNames : false,
userNames: [],
value: []
}
componentDidMount = () => {
const {names} = this.props;
const updatedNames = names.map((name) => ({...name, ...{isEditable: false}}));
this.setState({
userNames: updatedNames
})
}
inputNamesHandler = (namesIndex) => {
const {userNames} = this.state;
const updatedUserNameDetails = [...userNames];
updatedUserNameDetails[namesIndex].isEditable = true;
this.setState({userNames: updatedUserNameDetails})
}
saveButton = (inputValue, index) => {
alert(inputValue + ' was clicked');
alert(inputValue);
alert(index);
}
render() {
return <div>
<h1>Hello</h1>
<div>
{this.state.userNames.map((nameDetails, index) => {
if(nameDetails.isEditable) {
return (<div><TextArea clicked={(name) => this.saveButton(name, index)}/></div>);
} else {
return <div onClick={() => this.inputNamesHandler(index)} style={styles.namesContainer}>
<div style={styles.firstMargin}><FirstName firstName={nameDetails.firstName}></FirstName></div>
<div><LastName lastName={nameDetails.lastName}></LastName></div>
</div>
}
})}
</div>
</div>
}
}
子组件
export default class TextArea extends Component {
constructor(props) {
super(props);
this.state = {value:''}
this.handleChange = this.handleChange.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
console.log('Textarea was rendered')
return (
<div>
<div style={styles.inputContainer}>
<input type="text" style={styles.textField} value={this.state.value} onChange={this.handleChange}></input>
<button type="submit" style={styles.saveButton} onClick={() => this.props.clicked(this.state.value)}>Save</button>
</div>
</div>
)
}
}
名称保存在另一个使用props访问的组件中。
最佳答案
这是您所期望的。
这样做有更好的方法,但这只是蛮力。
class App extends React.Component {
state = {
one: { firstName: "Player", lastName: "One" },
two: { firstName: "Two", lastName: "Player" },
three: { firstName: "Three", lastName: "Player" },
four: { firstName: "Four", lastName: "Player" },
five: { firstName: "Five", lastName: "Player" }
};
oneUpdate = updatedValue => {
this.setState({
one: {
firstName: updatedValue.firstName,
lastName: updatedValue.lastName
}
});
};
twoUpdate = updatedValue => {
this.setState({
two: {
firstName: updatedValue.firstName,
lastName: updatedValue.lastName
}
});
};
threeUpdate = updatedValue => {
this.setState({
three: {
firstName: updatedValue.firstName,
lastName: updatedValue.lastName
}
});
};
fourUpdate = updatedValue => {
this.setState({
four: {
firstName: updatedValue.firstName,
lastName: updatedValue.lastName
}
});
};
fiveUpdate = updatedValue => {
this.setState({
five: {
firstName: updatedValue.firstName,
lastName: updatedValue.lastName
}
});
};
render() {
const { one, two, three, four, five } = this.state;
return (
<div>
<PlayerBlock name={one} update={this.oneUpdate} />
<PlayerBlock name={two} update={this.twoUpdate} />
<PlayerBlock name={three} update={this.threeUpdate} />
<PlayerBlock name={four} update={this.fourUpdate} />
<PlayerBlock name={five} update={this.fiveUpdate} />
</div>
);
}
}
class PlayerBlock extends React.Component {
state = {
editMode: false,
userName: {},
firstName: "",
lastName: ""
};
componentDidMount() {
// this.setState({userName:this.props.name});
this.setState({
firstName: this.props.name.firstName
});
this.setState({
lastName: this.props.name.lastName
});
}
sendData = () => {
this.props.update({
firstName: this.state.firstName,
lastName: this.state.lastName
});
this.setState({ editMode: false });
};
render() {
var { editMode } = this.state;
return (
<div>
{this.state.editMode ? (
<div>
<input
value={this.state.firstName}
onChange={e => this.setState({ firstName: e.target.value })}
/>
<input
value={this.state.lastName}
onChange={e => this.setState({ lastName: e.target.value })}
/>
<button onClick={() => this.sendData()}>Save</button>
</div>
) : (
<div onClick={() => this.setState({ editMode: true })}>
{this.props.name.firstName} {this.props.name.lastName}
</div>
)}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 如何将div转换为输入,然后将输入转换为div(onclick),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59384960/