我有一个组件，当用户点击提交（或输入）时，一个新问题会显示一个文本输入，用户输入一个答案并点击提交（这会一直重复，直到最后一个问题得到解答）。
除非我添加参考或自动对焦，否则它无法聚焦。我不确定在这个时刻该做什么，无论我怎样尝试都无法让它发挥作用。
我可以获得一些帮助，当用户点击提交时，它会关注下一个文本输入。我在我的代码中使用下面的样式化组件，因此文本输入将是inputStyle
class NameForm extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
this.state = {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: '',
newValue: '',
submitted: false,
input1: 0,
input2: 0,
input3: 0,
input4: 0,
input5: 0,
input6: 0,
input7: 0,
display: 'block',
currentStep: 1,
whitebox: 'block'
};
this.handleFirstChange = event => this.handleChange(event, 'value1');
this.handleSecondChange = event => this.handleChange(event, 'value2');
this.handleThirdChange = event => this.handleChange(event, 'value3');
this.handleFourthChange = event => this.handleChange(event, 'value4');
this.handleFifthChange = event => this.handleChange(event, 'value5');
this.handleSixthChange = event => this.handleChange(event, 'value6');
this.handleSeventhChange = event => this.handleChange(event, 'value7');
this.handleSubmit = event => this._handleSubmit(event);
}
handleChange(event, type) {
let newState = {};
newState[type] = event.target.value;
this.setState(newState);
}
_handleSubmit(event) {
event.preventDefault();
if (this.state.currentStep > 6) {
this.setState({ visible: !this.state.visible });
this.setState({ display: 'none' });
this.setState({ whitebox: 'none' });
} else {
this.setState({ currentStep: this.state.currentStep + 1 });
}
}
inputHolderStyle(style, step) {
const displayProp = step === this.state.currentStep ? 'block' : 'none';
return {
// background: `url(${style}) no-repeat center center`,
// backgroundSize: 'cover',
// border: 'white 1px solid',
// background: '#00B5DE',
display: displayProp
};
}
focus() {
// Explicitly focus the text input using the raw DOM API
this.textInput.focus();
}
render() {
const divStyle = {
marginTop: '50px',
color: 'white',
top: '25px',
position: 'absolute',
width: '320px',
textAlign: 'center',
border: 'white 1px solid',
padding: '1em',
borderRadius: '3px',
display: this.state.whitebox
};
let question = null;
const show = this.state.visible;
if (show) {
question = (
<div>
<Crawler
properName1={this.state.value1}
noun1={this.state.value2}
properName2={this.state.value3}
properName3={this.state.value4}
noun2={this.state.value5}
personsName1={this.state.value6}
noun3={this.state.value7}
/>
</div>
);
}
return (
<MainContainer>
<div style={divStyle}>
<form
style={{ display: this.state.display }}
onSubmit={this.handleSubmit}
>
<InputHolder style={this.inputHolderStyle(ml1, 1)}>
<InputQuestion>1. Enter A Proper Noun</InputQuestion>
<label>
<InputStyle
name="input1"
type="text"
value={this.state.value1}
placeholder="Proper Noun"
onChange={this.handleFirstChange}
ref1={input => {
this.textInput = input;
}}
/>
<GrammarNerd>
Hint: Use words like Rebel, Hell's Angels, Vegan
</GrammarNerd>
</label>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml2, 2)}>
<InputQuestion>2. Enter A Location</InputQuestion>
<label>
<InputStyle
name="input2"
type="text"
ref={input => {
this.textInput = input;
}}
value={this.state.value2}
placeholder="Noun"
onChange={this.handleSecondChange}
ref2={input => {
this.textInput = input;
}}
/>
<GrammarNerd>
Hint: Use a word such as Base, Bunker, Foxhole, Bedroom
</GrammarNerd>
</label>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml3, 3)}>
<InputQuestion>
Enter A Proper Noun that Describes Evil
</InputQuestion>
<label>
<InputStyle
name="input3"
type="text"
placeholder="Enter a Proper Noun"
value={this.state.value3}
onChange={this.handleThirdChange}
ref3={input => {
this.textInput = input;
}}
/>
</label>
<GrammarNerd>
Hint: Use words like Empire, Ottoman, Mongols
</GrammarNerd>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml3, 4)}>
<InputQuestion>Describe Something Menacing</InputQuestion>
<label>
<InputStyle
name="input4"
type="text"
placeholder="Enter a Proper Name"
value={this.state.value4}
onChange={this.handleFourthChange}
ref4="theDiv"
/>
<GrammarNerd>
Hint: Freeze Ray, Mother of All Bombs, Leftover Fruitcake
</GrammarNerd>
</label>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml3, 5)}>
<InputQuestion>Describe a fortified area</InputQuestion>
<label>
<InputStyle
name="input5"
type="text"
placeholder="Enter a Noun"
value={this.state.value5}
onChange={this.handleFifthChange}
ref5={input => {
this.textInput = input;
}}
/>
<GrammarNerd>
Hint: Castle, Bunker, Planet, Safe Space
</GrammarNerd>
</label>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml3, 6)}>
<InputQuestion>A Woman's Name</InputQuestion>
<label>
<InputStyle
name="input6"
type="text"
placeholder="A Woman's Name"
value={this.state.value6}
onChange={this.handleSixthChange}
ref6={input => {
this.textInput = input;
}}
/>
</label>
<GrammarNerd>
Hint: Astrid, Diana, Mononoke, Peach{' '}
</GrammarNerd>
</InputHolder>
<InputHolder style={this.inputHolderStyle(ml3, 7)}>
<InputQuestion>Describe a large area of mass</InputQuestion>
<label>
<InputStyle
name="input7"
type="text"
placeholder="Enter a Noun"
value={this.state.value7}
onChange={this.handleSeventhChange}
ref7={input => {
this.textInput = input;
}}
/>
</label>
<GrammarNerd>
Galaxy, Planet, Wal Mart
</GrammarNerd>
</InputHolder>
<InputHolderSubmit>
<SubmitButton onClick={this.focus} type="submit" value="Submit" />
</InputHolderSubmit>
</form>
</div>
<NextQuestion>
{question}
</NextQuestion>
</MainContainer>
);
}
}
export default NameForm;
我已经离开了我测试过的一些代码（ref和autofocus）以及一些似乎没有破坏代码的函数，但是它们都没有工作。
感谢您的帮助
答案 0 :(得分：2)
工作示例AUTOFOCUS DEMO
以下代码是您想要做的简化示例实现....检查并运行它并让我知道这是否有帮助！快乐的编码=]！
import React, { Component } from "react";
export default class AutoFocusText extends Component {
constructor() {
super();
this.state = {
active: 0,
questions: [
"how are you?",
"whats your name?",
"is reactjs awesome?"
],
value: "",
answers: []
};
this.submitHandler = this.submitHandler.bind(this);
this.renderQuestion = this.renderQuestion.bind(this);
this.onChange = this.onChange.bind(this);
}
renderQuestion() {
const { questions, active, value } = this.state;
if (active >= questions.length) return <div>You're Done!</div>;
return questions
.filter((quest, index) => index === active) // get next question
.map(quest => // map over selected question, the key prop allows react to
<FormElement // unmount and mount the components properly, thereby focussing correctly
key={active}
text={quest}
value={value}
onChange={this.onChange}
/>
);
}
onChange(e) {
this.setState({ value: e.target.value });
}
submitHandler(e) {
e.preventDefault();
const answers = [...this.state.answers, this.state.value]; //push new value to answsers array without mutation
const value = ""; // clear input
const active = this.state.active + 1; // index pointer
this.setState({ answers, value, active });
}
render() {
return (
<div>
{/* Form Wrapper */}
<form onSubmit={this.submitHandler}>
{this.renderQuestion()}
<button type="submit">Submit</button>
</form>
<ul>
{this.state.answers.map((ans, index) => {
return (
<li key={index}>
{ans}
</li>
);
})}
</ul>
</div>
);
}
}
以下是管理文本输入聚焦的FormElement组件......
class FormElement extends Component {
constructor() {
super();
}
componentDidMount() {
//focus text input upon mounting component
this.textInput.focus();
}
render() {
const { text, value, onChange } = this.props;
return (
<div>
<p>
{text}
</p>
<input
ref={el => {
this.textInput = el;
}}
onChange={onChange}
type="text"
value={value}
/>
</div>
);
}
}
答案 1 :(得分：0)
如需修理，请考虑以下内容
如果我是你，我将使用一个带有switch语句的renderQuestion（ step ）方法，该方法为每个步骤的情况返回JSX。使用{this.renderQuestion（step）}在主渲染方法中的表单元素之后调用此方法，执行切换，这样只有活动问题才会呈现到DOM中。这可能有助于使autoFocus工作，我不确定。但是为了更明确，ref现在可以正常工作，你可以简单地做
componentDidUpdate() {
this.textInput && this.textInput.focus();
}